我想问一个js+jspsmartupload上传的问题，大虾来帮我看看吧

没有梦想-何必远方
博客专家认证
2014-07-26 10:54:48
现在做一个用imagecopper裁剪图片后上传的功能，利用jspsmartupload上传组件进行上传。
我的问题如下：
1、jspsmartupload上传文件是不是都要用<input type="file" />进行上传
2、我上传后没有报错，但并没有真正上传到服务器，打印的mySmartUpload.getSize() 为18602，但mySmartUpload.getFiles().getCount()为0
3、代码如下:
<!DOCTYPE HTML>
<!-- saved from url=(0037)http://www.riaidea.com/html5/cropper/ -->
<!DOCTYPE html PUBLIC "" ""><HTML><HEAD><META content="IE=11.0000"
http-equiv="X-UA-Compatible">

<META name="Author" content="flashlizi - www.riaidea.com">
<META name="Description" content="HTML5 experiment">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>头像上传组件 - HTML5版</TITLE>
<STYLE>
body
{
padding: 0;
margin: 0;
height: 100%;
background-color: #eee;
font-size: 12px;
color: #000;
text-align:center;


}

a
{
text-decoration: none;
color: #fff;
padding:10px 10px 10px 10px;
text-align:center;
background-color:#1A8EE6;
}
a span
{
width:100px;
height:30px;

padding:10px 20px 10px 20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
background:#3399cc;
-moz-box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
-webkit-box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
box-shadow:
0 15px 30px 0 rgba(255,255,255,.25) inset,
0 2px 7px 0 rgba(0,0,0,.2);
}
a:hover
{
text-decoration: none;
color: #f00;
}

#container
{
position: absolute;
left: 20px;
top: 20px;
}

#wrapper
{
position: absolute;
left: 0px;
top: 40px;
}

#cropper
{
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #ccc;
}

#previewContainer
{
position: absolute;
left: 350px;
top: 60px;
}

.preview
{
border: 1px solid #ccc;
}

#selectBtn
{
position: absolute;
left: 0px;
top: 0px;
width: 119px;
height: 27px;
background: url(images/select.png);
}

#saveBtn
{
position: absolute;
left: 150px;
top: 0px;
width: 67px;
height: 27px;
background: url(images/save.png);
}

#rotateLeftBtn
{
position: absolute;
left: 0px;
top: 315px;
width: 100px;
height: 22px;
padding-left: 25px;
padding-top: 2px;
background: url(images/left.png) no-repeat;
}

#rotateRightBtn
{
position: absolute;
left: 144px;
top: 315px;
width: 100px;
height: 22px;
padding-right: 25px;
padding-top: 2px;
background: url(images/right.png) no-repeat right;
}

</STYLE>
<!--<script type="text/javascript" src="ImageCropper.js"></script>-->
<SCRIPT src="头像上传组件%20-%20HTML5版_files/imagecropper.min.js" type="text/javascript"></SCRIPT>

<SCRIPT type="text/javascript">

var cropper;

function init()
{
cropper = new ImageCropper(300, 300, 180, 180);
cropper.setCanvas("cropper");
cropper.addPreview("preview100");
cropper.addPreview("preview50");

if(!cropper.isAvaiable())
{
alert("Sorry, your browser doesn't support FileReader, please use Firefox3.6+ or Chrome10+ to run it.");
}
}

function selectImage(fileList)
{
cropper.loadImage(fileList[0]);
}

function rotateImage(e)
{
switch(e.target.id)
{
case "rotateLeftBtn":
cropper.rotate(-90);
break;
case "rotateRightBtn":
cropper.rotate(90);
break;
}
}

function saveImage()
{
var imgData = cropper.getCroppedImageData(180, 180);

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e)
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{
document.getElementById("status").innerHTML = "<font color='#f00'>上传成功！</font>";
}
}
};

xhr.open("post", "servlet/SmartUploadServlet", true);
var data = new FormData();
data.append("username", "flashlizi");
data.append("size", 180);
data.append("file", imgData);
xhr.send(data);
}

function trace()
{
if(typeof(console) != "undefined") console.log(Array.prototype.slice.apply(arguments).join(" "));
};

</SCRIPT>

<META name="GENERATOR" content="MSHTML 11.00.9600.17105"></HEAD>
<BODY onload="init();">
<DIV id="container"><A id="selectBtn" onclick="document.getElementById('input').click();"
href="javascript:void(0);"><span>选择图片</span></A> <A id="saveBtn" onclick="saveImage();" href="javascript:void(0);"><span>保存</span></A>
<INPUT id="input" style="visibility: hidden;" onchange="selectImage(this.files)" type="file" size="10">

<DIV id="wrapper"><CANVAS id="cropper"></CANVAS> <A id="rotateLeftBtn"
onclick="rotateImage(event);" href="javascript:void(0);">向左旋转</A>
<A id="rotateRightBtn"
onclick="rotateImage(event);" href="javascript:void(0);">向右旋转</A> <SPAN id="status"
style="left: 350px; top: 10px; width: 100px; position: absolute;"></SPAN>
<DIV id="previewContainer"><CANVAS
width="100" height="100" class="preview" id="preview100" style="left: 230px; top: 0px; position: absolute;"></CANVAS>
<SPAN style="left: 230px; top: 110px; width: 100px; text-align: center; position: absolute;">中尺寸图片
100x100像素</SPAN> <CANVAS width="50" height="50" class="preview" id="preview50"
style="left: 255px; top: 150px; position: absolute;"></CANVAS> <SPAN style="left: 245px; top: 210px; width: 70px; text-align: center; position: absolute;">小尺寸图片
50x50像素</SPAN> </DIV></DIV></DIV></BODY></HTML>
...全文
173 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
执笔记忆的空白 2014-08-15
  • 打赏
  • 举报
 回复
引用 7 楼 u011250851 的回复:
[quote=引用 4 楼 xya_zone 的回复:] 断点跟踪，看下问题在哪里。 [quote=引用 2 楼 shijing266 的回复:] 额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
[/quote] 抱歉回复晚了。。。 我知道问题出在哪里了，上传的图片 是 base64编码的字节流 而不是文件格式的图片，所以后台没有接收到。 这里用了一下html5的canvas标签生成的图片，没想到是字节流形式的，问题还没有解决，但我想放弃这种方法了，个人认为jsp根本实现不了这种复杂的图片上传功能，决定做一个简单的图片上传，而不用canvas进行裁剪了，还是谢谢您的回答。[/quote] 不用谢，我记得jQuery有个多图片上传的控件 ，uploadify! 你可以去看看 http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
执笔记忆的空白 2014-08-15
  • 打赏
  • 举报
 回复
不用谢，客气了~
没有梦想-何必远方 2014-08-15
  • 打赏
  • 举报
 回复
引用 8 楼 shijing266 的回复:
[quote=引用 7 楼 u011250851 的回复:] [quote=引用 4 楼 xya_zone 的回复:] 断点跟踪，看下问题在哪里。 [quote=引用 2 楼 shijing266 的回复:] 额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
[/quote] 抱歉回复晚了。。。 我知道问题出在哪里了，上传的图片 是 base64编码的字节流 而不是文件格式的图片，所以后台没有接收到。 这里用了一下html5的canvas标签生成的图片，没想到是字节流形式的，问题还没有解决，但我想放弃这种方法了，个人认为jsp根本实现不了这种复杂的图片上传功能，决定做一个简单的图片上传，而不用canvas进行裁剪了，还是谢谢您的回答。[/quote] 不用谢，我记得jQuery有个多图片上传的控件 ，uploadify! 你可以去看看 http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html[/quote] 嗯嗯 好的 谢啦
没有梦想-何必远方 2014-08-14
  • 打赏
  • 举报
 回复
引用 4 楼 xya_zone 的回复:
断点跟踪，看下问题在哪里。 [quote=引用 2 楼 shijing266 的回复:] 额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
[/quote] 抱歉回复晚了。。。 我知道问题出在哪里了，上传的图片 是 base64编码的字节流 而不是文件格式的图片，所以后台没有接收到。 这里用了一下html5的canvas标签生成的图片，没想到是字节流形式的，问题还没有解决，但我想放弃这种方法了，个人认为jsp根本实现不了这种复杂的图片上传功能，决定做一个简单的图片上传，而不用canvas进行裁剪了，还是谢谢您的回答。
没有梦想-何必远方 2014-08-14
  • 打赏
  • 举报
 回复
引用 3 楼 baohuan_love 的回复:
[quote=引用 2 楼 shijing266 的回复:] 额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
同意[/quote] 抱歉回复晚了。。。 我知道问题出在哪里了，上传的图片 是 base64编码的字节流 而不是文件格式的图片，所以后台没有接收到。 这里用了一下html5的canvas标签生成的图片，没想到是字节流形式的，问题还没有解决，但我想放弃这种方法了，个人认为jsp根本实现不了这种复杂的图片上传功能，决定做一个简单的图片上传，而不用canvas进行裁剪了，还是谢谢您的回答。
没有梦想-何必远方 2014-08-14
  • 打赏
  • 举报
 回复
引用 2 楼 shijing266 的回复:
额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
抱歉回复晚了。。。 我知道问题出在哪里了，上传的图片 是 base64编码的字节流 而不是文件格式的图片，所以后台没有接收到。 这里用了一下html5的canvas标签生成的图片，没想到是字节流形式的，问题还没有解决，但我想放弃这种方法了，个人认为jsp根本实现不了这种复杂的图片上传功能，决定做一个简单的图片上传，而不用canvas进行裁剪了，还是谢谢您的回答。
陌城 2014-07-31
  • 打赏
  • 举报
 回复
断点跟踪，看下问题在哪里。
引用 2 楼 shijing266 的回复:
额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
爱跳舞的铅笔头 2014-07-31
  • 打赏
  • 举报
 回复
引用 2 楼 shijing266 的回复:
额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
同意
没有梦想-何必远方 2014-07-26
  • 打赏
  • 举报
 回复
后台代码：（应该没有问题，用之前的<input type="file" />可以完成普通文件上传） package load; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.jspsmart.upload.SmartFile; import com.jspsmart.upload.SmartUpload; public class SmartUploadServlet extends HttpServlet { private ServletConfig config; //初始化Servlet final public void init(ServletConfig config) throws ServletException{ this.config=config; } //处理GET请求 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } //响应POST请求 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //获取PrintWriter对象 PrintWriter out = response.getWriter(); out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">"); out.println("<HTML>"); out.println("<HEAD><TITLE>A Servlet</TITLE></HEAD>"); out.println("<BODY bgcolor='white'><center><br>"); out.println("<br><h1>jspSmartUpload</h1>"); out.println("<hr><br>"); //新建一个SmartUpload对象 SmartUpload mySmartUpload=new SmartUpload(); try{ //上传初始化 mySmartUpload.initialize(config, request, response); //设定每个上传文件的最大长度 mySmartUpload.setMaxFileSize(1*1024*1024); //中512 //设定总上传数据的长度 mySmartUpload.setTotalMaxFileSize(1*1024*1024); //设定允许上传的文件的类型,只允许上传java,doc,txt文件 mySmartUpload.setAllowedFilesList("jpg,png,doc,txt"); /*mySmartUpload.setAllowedFilesList("java,doc,txt");*/ //设定禁止上传的文件的类型,禁止上传带有exe,bat文件 mySmartUpload.setDeniedFilesList("exe,bat"); //上传文件 mySmartUpload.upload(); System.out.println(mySmartUpload.getSize()+"文件长度"+mySmartUpload.getFiles().getCount()+"文件数量"); //将上传文件全部保存到指定目录 String name = new String(mySmartUpload.getRequest().getParameter("paramete")); System.out.println(mySmartUpload.getRequest().getParameter("size")); System.out.println(name); int count=mySmartUpload.save("/"); out.println(//利用Request对象获取参数之值 //String name= new String(request.getParameter("name").getBytes("ISO-8859-1"),"utf-8") ; mySmartUpload.getRequest().getParameter("paramete")+" "); mySmartUpload.getRequest().getParameter("size"); out.println(name); System.out.println(mySmartUpload.getBinaryData(1)); System.out.println(mySmartUpload.getBinaryData(2)); //显示处理结果 out.println("<font color=red>"+count+"</font> File Upload!<br>"); //处理每个上传文件 for(int i=0;i<mySmartUpload.getFiles().getCount();i++) { SmartFile file =mySmartUpload.getFiles().getFile(i); //判断用户是否选择了文件 if(!file.isMissing()){ //打印文件名 out.println("File Name: <font color=red>" +file.getFileName()+"</font><br>"); //打印文件扩展名 out.println("File ExtName: <font color=red>" +file.getFileExt()+"</font><br>"); //打印文件路径,包括目录 out.println("Path: <font color=red>" +file.getFilePathName()+"</font><br>"); //另存到以Web应用程序的根目录为文件根目录的目录下 //(声明一下：在Myeclipse中，该目录位于工程下的.metadata/.me_tcat/webapps/该工程目录/upload/) file.saveAs("/upload/"+file.getFileName(),mySmartUpload.SAVE_VIRTUAL); System.out.println(file.getFileName()); } } }catch(Exception e){//异常处理 //打印自定义异常信息 out.println("Unanable to upload the file.<br>"); out.println("Please Check The File Type"); } } }
执笔记忆的空白 2014-07-26
  • 打赏
  • 举报
 回复
额...既然你@了我， 还是花了10分钟看完你的代码... 你单个的普通文件上传没有问题， 现在多文件上传有问题的话，mySmartUpload.getFiles().getCount() 为0， 你可以在获取文件哪里设置断点，看看有没有传进来.. 如果没有，那肯定是传入后台出了错，具体什么我也不太清楚，毕竟我也没用过，你百度搜搜遇 jspsmartupload相关的资料看看吧 应该有这种例子的
jsp+jspsmartupload控件上传图片至数据库
jsp+jspsmartupload控件上传图片至数据库源码采用的是jsp+servlet+javabean，数据库是server 2005，关键是传地址
jsp+jspsmartupload实现上传下载方法及代码解析
jsp+jspsmartupload实现动态上传下载方法及代码解析
所有工具jar包ant+charDirector+dojo+dom+hibernate+junite+log4j+spring+struts+xml+jspSmartUpload.jar
ant+charDirector+dojo+dom+hibernate+junite+log4j+spring+struts+xml+jspSmartUpload 所有工具jar包 自己说实用不
jspSmartUpload 组件的上传下载完整实例
采用jspSmartUpload 组件实现的上传下载的完整实例 下载即可运行，但是这个压缩包不支持中文名称的文件下载功能，我上传了一个可以下载中文的不会乱码的jspSmartUpload 组件，网址：http://download.csdn.net/detail/huahuahailang/4265620 照着使用，即可下载中文。
cropZoom+jspsmartupload
仿照flash效果，实现上传并裁剪照片。结合jQuery_cropZoom最近插件和jsp_smartupload.
Java EE

67,513

社区成员

225,878

社区内容

发帖
与我相关
我的任务
社区描述
J2EE只是Java企业应用。我们需要一个跨J2SE/WEB/EJB的微容器，保护我们的业务核心组件（中间件），以延续它的生命力，而不是依赖J2SE/J2EE版本。
社区管理员
  • Java EE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章