关于是否使用ajaxfileupload.js插件上传的问题

曾经有过一次使用ajaxfileupload.js的经验，当时也是看着网上的博客来写的，没有问题。

但现在同样又遇到需要文件上传的问题，再次拿起ajaxfileupload.js，发现确实错误频频：

1. handleError 找不到问题

原因：jquery高版本移除了这个方法，在插件里面添加即可

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] );
}
}

2.文件只能上传一次的问题

原因：又是插件问题。。。

找到createUploadForm

var oldElement = $('#' + fileElementId);  
var newElement = $(oldElement).clone();  
$(oldElement).attr('id', fileId);  
$(oldElement).before(newElement);  
$(oldElement).appendTo(form);

将以上代码修改成

var oldElement = jQuery('#' + fileElementId);  
var newElement = oldElement.clone(true);  
newElement[0].files=oldElement[0].files;  
oldElement.attr('id', fileId);  
oldElement.before(newElement);  
oldElement.appendTo(form);

3. Refused to display  "XXXXX这里是你的上传url"   in a frame because it set 'X-Frame-Options' to 'DENY'

这个问题对我来说很尴尬，我只知道是由于iframe的问题，网上一大堆都说配置http响应头 X-Frame-Options的属性，很尴尬，我不会。。。。

 

4.success的回调问题

success: function(data,status){}  data一直是undefined,看了好久的源代码，还是没能耐性的找到问题，sorry。。

 

以下才是正片！！！！！！！！！！！！！！！

鉴于这次使用ajaxfileupload.js遇到如此多的问题，我决定不用它了，恩，对，不用它了。

原理就是form表单提交，咱自己写form不就行了，代码奉上

前端：

<form action="这里是你的上传url" enctype="multipart/form-data" method="post" id="fileForm" name="fileForm">
    <input type="file" value="选择文件" id="uploadfile" name="uploadfile">
</form>

这时你需要一个插件可以很方便的帮你使用ajax提交表单 jquery.form.js  下载地址： http://download.csdn.net/detail/yusewuhen/7203209

这里是js代码：

var form = $("#fileForm");
var options  = {    
　　url:'../corp/excelimport.html',    
　　type:'post',
    dataType: 'json',
    success:function(data){    
    　　var jsondata = eval("("+data+")"); 
        console.log(jsondata);
    }    
};
form.ajaxSubmit(options);

这样前台基本上就ok了，感觉比起ajaxfileupload还是方便了不少

后台的话我这边用的是MVC 可以参考一下

这里要想各位解释一下，我这边是上传文件只是为了解析而已，所以只要获取到他的流就行，解析的代码就不贴了，太多了看了乱

@RequestMapping("/excelimport")
@ResponseBody

public String excelimport(@RequestParam(value = "uploadfile") MultipartFile uploadfile,HttpServletRequest request,HttpServletResponse response){

        System.out.println("\nexcelimport----------------------------------------------\n");
        String userData = "";
        String result_str = "";
        if (uploadfile != null) {
            if (uploadfile.isEmpty()) {
                System.out.println("is empty!");
                return "no data";
            } else{
                // 文件原名称
                String originFileName = uploadfile.getOriginalFilename();
                try {
                    InputStream stream =  uploadfile.getInputStream();return result_str;
                } catch (Exception e) {
                    System.out.println("文件上传失败");
                    e.printStackTrace();
                }
            }
        }
        return null;
    }

这边要注意的是 @RequestParam(value = "uploadfile") MultipartFile uploadfile  这个uploadfile  需要和你的<input type="file" name="uploadfile  "> 中的name属性保持一致。