使用ajaxfileupload的一点心得
2016-08-24 14:04
453 查看
ajaxfileupload大概是因为很久不更新,所有有不少的问题
1、handlerError not find
这个东西从jQuery1.4之后就已经没有了,所以需要手动添加到ajaxfileupload.js中
(插在js文件内部)
<span style="color:#ff0000;"> handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
} ,</span>
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
2、携带参数传递文件
因为ajaxfileupload是创建了form传递的,然而作者并没有把data的内容加入到form中,所以需要手动添加
(红色部分为添加的内容,共3处)
<span style="color:#ff0000;">createUploadForm: function(id, fileElementId,data)</span>
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//add data to form
<span style="color:#ff0000;">if(data){
for(var i in data){
//alert(i+":"+data[i]);
$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}</span>
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
3、文件成功上传,然而返回数据却进了error
因为ajaxfileupload的返回参数多了一串<pre>,无法用json格式解析,所以进了error
我的做法是修改了json返回值
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// ifthe type is "script", eval it in global context
if( type == "script" ){
jQuery.globalEval( data );
}
// Get the JavaScript object, ifJSON is used.
if( type == "json" ){
<span style="color:#ff0000;"> <span style="white-space:pre"> </span>var a = data.indexOf("{");
var b = data.indexOf("}")+1;
data = data.substring(a,b);
//alert(data);</span>
eval("data = " + data);
}
// evaluate scripts within html
if( type == "html" ){
jQuery("<div>").html(data).evalScripts();
}
return data;
}
4、ajaxfileupload携带参数传递中文乱码
因为ajaxfileload默认是以ISO-8859-1编码,所以在解析的request的时候要转换成你的编码格式
(用中文编码过滤器没有效果,不懂为什么,希望大神指教!!!)
for(FileItem file :files){
String type = file.getContentType();
if(type!=null) continue;
if(file.isFormField()){
// System.out.println(file.getFieldName());
// System.out.println(file.getString());
<span style="color:#ff0000;">if("painter".equals(file.getFieldName().trim())){
painter = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}
if("picname".equals(file.getFieldName().trim())){
picname = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}
if("userId".equals(file.getFieldName().trim())){
userId = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}</span>
}
}
5、有些ajaxfileupload.js中的post、json需要大写才能生效,版本太多,需要自己查看js文件
附上完整的ajaxfileupload上传文件代码
前台jsp
1、handlerError not find
这个东西从jQuery1.4之后就已经没有了,所以需要手动添加到ajaxfileupload.js中
(插在js文件内部)
<span style="color:#ff0000;"> handleError: function( s, xhr, status, e ) {
// If a local callback was specified, fire it
if ( s.error ) {
s.error.call( s.context || s, xhr, status, e );
}
// Fire the global callback
if ( s.global ) {
(s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] );
}
} ,</span>
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
2、携带参数传递文件
因为ajaxfileupload是创建了form传递的,然而作者并没有把data的内容加入到form中,所以需要手动添加
(红色部分为添加的内容,共3处)
<span style="color:#ff0000;">createUploadForm: function(id, fileElementId,data)</span>
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = jQuery('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = jQuery('#' + fileElementId);
var newElement = jQuery(oldElement).clone();
jQuery(oldElement).attr('id', fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//add data to form
<span style="color:#ff0000;">if(data){
for(var i in data){
//alert(i+":"+data[i]);
$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}</span>
//set attributes
jQuery(form).css('position', 'absolute');
jQuery(form).css('top', '-1200px');
jQuery(form).css('left', '-1200px');
jQuery(form).appendTo('body');
return form;
},
<pre name="code" class="javascript"> ajaxFileUpload: function(s) { // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout s = jQuery.extend({}, jQuery.ajaxSettings, s); var id = s.fileElementId; <span style="color:#ff0000;"> var form = jQuery.createUploadForm(id, s.fileElementId, s.data);</span> var io = jQuery.createUploadIframe(id, s.secureuri); var frameId = 'jUploadFrame' + id; var formId = 'jUploadForm' + id;
3、文件成功上传,然而返回数据却进了error
因为ajaxfileupload的返回参数多了一串<pre>,无法用json格式解析,所以进了error
我的做法是修改了json返回值
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// ifthe type is "script", eval it in global context
if( type == "script" ){
jQuery.globalEval( data );
}
// Get the JavaScript object, ifJSON is used.
if( type == "json" ){
<span style="color:#ff0000;"> <span style="white-space:pre"> </span>var a = data.indexOf("{");
var b = data.indexOf("}")+1;
data = data.substring(a,b);
//alert(data);</span>
eval("data = " + data);
}
// evaluate scripts within html
if( type == "html" ){
jQuery("<div>").html(data).evalScripts();
}
return data;
}
4、ajaxfileupload携带参数传递中文乱码
因为ajaxfileload默认是以ISO-8859-1编码,所以在解析的request的时候要转换成你的编码格式
(用中文编码过滤器没有效果,不懂为什么,希望大神指教!!!)
for(FileItem file :files){
String type = file.getContentType();
if(type!=null) continue;
if(file.isFormField()){
// System.out.println(file.getFieldName());
// System.out.println(file.getString());
<span style="color:#ff0000;">if("painter".equals(file.getFieldName().trim())){
painter = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}
if("picname".equals(file.getFieldName().trim())){
picname = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}
if("userId".equals(file.getFieldName().trim())){
userId = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8");
}</span>
}
}
5、有些ajaxfileupload.js中的post、json需要大写才能生效,版本太多,需要自己查看js文件
附上完整的ajaxfileupload上传文件代码
前台jsp
<span style="white-space:pre"> </span><div class="modal-body"> <div class="form-group"> <label id="label1" class="col-sm-3 control-label">作品名称</label> <div class="col-sm-8"> <input type="text" class="form-control" id="input_picname"> <span id="input_picname_msg"></span> </div> <label id="label2" class="col-sm-3 control-label"> 作者</label> <div class="col-sm-8"> <input type="text" class="form-control" id="input_picpain"> <span id="input_picpain_msg"></span> </div> <div class="col-sm-8"> <input type="file" name="upfile" class="form-control" id="input_pic" /> <span id="input_pic_msg"></span> </div> <!-- <div class="progress_bar"><span class="progress_per"></span></div> --> </div> </div>js文件
function addpic() { var picname = $("#can #input_picname").val(); var picpain = $("#can #input_picpain").val(); var imgURL = $("#input_pic").val(); $("#can #input_picname_msg").html(""); $("#can #input_picpain_msg").html(""); if (picname == "") { $("#can #input_picname_msg").html("作品名称不可为空"); return; } if (picpain == "") { $("#can #input_picpain_msg").html("作者不可为空"); return; } if (imgURL == ""){ alert("请选择上传的图片"); return ; } var suffix = imgURL.substr(imgURL.lastIndexOf(".")+1).toLowerCase(); if(suffix!="jpg"&&suffix!="png"&&suffix!="gif"&&suffix!="bmp"&&suffix!="jpeg"){ alert("请上传图片格式的文件"); return ; } $.ajaxFileUpload({ url:"savepic.do", type:"POST", secureuri:false, data:{painter:picpain,picname:picname,userId:userId,}, fileElementId:'input_pic', dataType:"json", success:function(data,status){ alert(data.msg); toHref("pictrue/toPictrue.do"); }, error:function(data, status, e){ alert("图片上传失败,请检查网络后重试"); } }); }服务器端Service
public MyResult savePic(HttpServletRequest req){ MyResult result = new MyResult(); //图片信息 picItem item = new picItem(); String painter = null; String picname = null; String userId = null; String picId = null; String fileName = null; Date time = null; String pictrue = null; boolean isMultipart = ServletFileUpload.isMultipartContent(req); DiskFileItemFactory factory = new DiskFileItemFactory(); // ServletContext context = req.getSession().getServletContext(); // //设置临时文件存放地址 // factory.setRepository(new File(System.getProperty("java.io.tmpdir"))); ServletFileUpload upload = new ServletFileUpload(factory); try { //set request encoding // req.setCharacterEncoding("utf-8"); //获取request中的信息 // upload.parseRequest(req); // MultipartHttpServletRequest mRequest = (MultipartHttpServletRequest) req; // List<MultipartFile>files = mRequest.getFiles("file"); // System.out.println(files.size()); // for(MultipartFile file :files){ List<FileItem> files = upload.parseRequest(req); // System.out.println(files); // System.out.println(files.size()); for(FileItem file :files){ String type = file.getContentType(); if(type!=null) continue; if(file.isFormField()){ // System.out.println(file.getFieldName()); // System.out.println(file.getString()); if("painter".equals(file.getFieldName().trim())){ painter = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8"); } if("picname".equals(file.getFieldName().trim())){ picname = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8"); } if("userId".equals(file.getFieldName().trim())){ userId = new String(file.getString().trim().getBytes("ISO-8859-1"),"utf-8"); } } } //System.out.println(new String(picname.getBytes("ISO-8859-1"),"utf-8")); for(FileItem file :files){ String type = file.getContentType(); if(type==null){ continue; } picId = acgUtil.createId(); time = new Date(); String rootUrl = new SimpleDateFormat("yyyyMMdd").format(time); String name = new SimpleDateFormat("HHmmss").format(time); fileName = rootUrl+name+userId+".jpg"; //获得文件储存路径 String realPath = sc.getRealPath("/"); realPath +="img/"; realPath +=(rootUrl+"/"); //创建文件目录 File dir = new File(realPath); if(!dir.exists()){ dir.mkdirs(); } //创建文件对象 File f = new File(realPath,fileName); if(f.exists()){ f.delete(); } //创建文件 f.createNewFile(); // file.transferTo(f); file.write(f); pictrue = "../img/"+rootUrl+"/"+fileName; //add pictrue message to mysql item.setPictrue(pictrue); item.setPainter(painter); item.setPicname(picname); item.setPictime(new Timestamp(time.getTime())); item.setPic_id(picId); item.setSubuser_id(userId); picDao.savePic(item); } } catch (Exception e) { e.printStackTrace(); throw new RuntimeException("图片上传失败",e); } result.setStatus(0); result.setMsg("图片上传成功"); return result; }
相关文章推荐
- 使用插件ajaxfileupload通过ajax方式上传文件,在火狐下出错
- jQuery上传文件插件AjaxFileUpload的使用
- Struts2中的异步提交(ajaxfileupload异步上传(图片)插件的使用)
- 使用ajaxfileupload.js实现ajax上传文件php版
- 使用AjaxFileUpload.js实现文件异步上传
- ajax fileupload上传组件的使用感悟
- $ajaxFileUpload可以带参数文件上传源码及使用
- ThinkPHP使用心得分享-上传类UploadFile的使用
- jQuery使用ajaxfileupload插件实现ajax文件上传
- 使用ajaxfileupload.js实现ajax上传文件php版
- ajax fileupload上传组件的使用感悟
- ajaxfileupload asp.net 的简单使用
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- ThinkPHP使用心得分享-上传类UploadFile的使用
- jquery 实现ajax 上传文件的功能(使用插件 ajaxfileupload)
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 基于struts2的ajaxfileupload异步上传插件的使用
- asp.net ajax AjaxFileUpload使用 多文件上传
- 使用AjaxFileUpload.js实现异步文件上传示例
- 使用AjaxFileUpload.js实现异步文件上传示例