用ajax异步上传附件

1、首先，jsp页面得引入

<script type="text/javascript" src="${ctx}/js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script>

<script type="text/javascript" src="${ctx}/js/ajaxfileupload.js"></script>

2、spring配置文件中，添加

<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"/>

3、自己的上传业务类代码

@Controller
@RequestMapping(value = "/upload")
public class UploadController {
    Logger log = Logger.getLogger(UploadController.class);

    @RequestMapping(value="/uploadFile")
    @ResponseBody
    public String uploadFile(@RequestParam(value = "file", required = false) MultipartFile file,HttpServletRequest request){
        JSONObject json = new JSONObject();
        json.put("success", false);
        try
        {
            log.info("开始上传附件");
            //String path = request.getSession().getServletContext().getRealPath("upload") + "\\"+this.createFolderName();
            String path = QRCodeUtil.class.getResource("/").getPath();
            path = path.substring(0, path.indexOf("/WEB-INF/"))
                    + File.separatorChar + "upload"+ "/"+this.createFolderName();
            
            String fileRealName = file.getOriginalFilename();
            String serverFileName = this.createAttachmentId() + fileRealName.substring(fileRealName.lastIndexOf("."));
            
            log.info("附件上传至=="+path+"  附件serverFileName="+serverFileName);
            File targetFile = new File(path, serverFileName);
            if (!targetFile.exists())
            {
                targetFile.mkdirs();
            }
            //保存  
            file.transferTo(targetFile);
            json.put("fileUrl",path + serverFileName);
            json.put("fileRealName", fileRealName);
            json.put("serverFileName", serverFileName);
            json.put("success", true);
        } catch (Exception e)
        {
            log.error("上传附件异常！",e);
        }
        log.info(json.toString());
        
        return json.toString();
    }

private String createFolderName() {

        Calendar calendar = Calendar.getInstance();
        calendar.setTime(new Date());
        String folderName = calendar.get(Calendar.YEAR) + "/";
        folderName += this.getDoubleStr((calendar.get(Calendar.MONTH) + 1), 2) + "/";
        folderName += this.getDoubleStr(calendar.get(Calendar.DAY_OF_MONTH), 2) + "";
        return folderName;
    }

private String createAttachmentId()
    {

        Calendar calendar = Calendar.getInstance();
        calendar.setTime(new Date());
        
        StringBuffer attachmentId = new StringBuffer(calendar.get(Calendar.YEAR));
        attachmentId.append(this.getDoubleStr((calendar.get(Calendar.MONTH) + 1), 2)).append("");
        attachmentId.append(this.getDoubleStr(calendar.get(Calendar.DAY_OF_MONTH),2)).append("");
        attachmentId.append(this.getDoubleStr(calendar.get(Calendar.HOUR_OF_DAY), 2)).append("");
        attachmentId.append(this.getDoubleStr(calendar.get(Calendar.MINUTE), 2)).append("");
        attachmentId.append(this.getDoubleStr(calendar.get(Calendar.SECOND), 2)).append("");
        attachmentId.append(this.getDoubleStr(calendar.get(Calendar.MILLISECOND), 3)).append("");
        attachmentId.append(this.getDoubleStr(new Random().nextInt(10000), 4));
        return attachmentId.toString();
    }

private String getDoubleStr(int value, int num)
    {

        String str = value + "";
        for (int i = 0; i < (num - str.length()); i++)
        {
            str = "0" + str;
        }
        return str;
    }
4、jsp页面：

<form  id="uploadForm" method="post" enctype="multipart/form-data">
                            <div>
                                <input type="file" id="file" name="file" readOnly/>
                                <a href="javascript:void(0)" onclick="uploadFile()" >上传</a>
                                <span id="noFileInfo" style="display:none;">请选择要上传的附件</span>
                            </div>
                            <!--/未选择照片状态-->
                            </form>

5、js:

function uploadFile(){
    if ($("#file").val() == "") {
        $("#noFileInfo").show();
    } else {
        $("#noFileInfo").hide();
        $("#uploadForm").ajaxSubmit({
            type:'post',  
            secureuri: false, //一般设置为false
            fileElementId: 'file',
            url:ctx+"/upload/uploadFile",
            dataType:"JSON",
            clearForm: true,//是否清空form
            success: function (data, status) {
                var test = eval("(" + data + ")");
                //alert(test.success);
                var item = "";
                if(test.success){
                    alert("success");
                } else {
                    alert("error");
                }
                
            },  
            error: function(data, status, e){
                alert(status);
                alert(data.responseText);
                alert(e);
                
            }
        });
    }
    
}

这样就实现上传了。

遇到问题：

我在实现该功能是，一直有一个问题，就是附件都上传了，但是ajaxSubmit一直执行error  function，通过alert（e），提示缺少 $.httpData 方法，在jquery.form.js中添加了：

$.httpData=function( xhr, type, s ) {

    var ct = xhr.getResponseHeader( 'content-type'), xml = type == 'xml' || !type && ct && ct.indexOf( 'xml' ) >=0, data = xml ? xhr.responseXML: xhr.responseText; if ( xml && data.documentElement.tagName == 'parsererror' )

    throw 'parsererror' ; if ( s && s.dataFilter ) data = s.dataFilter( data, type );if ( typeof data === 'string' ){if ( type == 'script' ) jQuery.globalEval( data ); if ( type == 'json' )

    data = window[ "eval" ]( '(' + data + ')' ); } return data; };

    $.handleError= function (s, xhr, status, e) {

    if (s.error) {
        
    s.error.call(s.context || s, xhr, status, e); }

    if (s.global) {

    (s.context ? jQuery(s.context) : jQuery.event).trigger('ajaxError', [xhr, s, e]); }

    }

})(jQuery);

就可以了。