jquery之ajaxfileupload异步上传插

现在的位置: 首页 > 综合 > 正文

jquery之ajaxfileupload异步上传插

2018年05月23日 ⁄ 综合 ⁄ 共 8377字 ⁄ 字号小中大 ⁄ 评论关闭

ajaxfileupload.js的下载地址为：

http://download.csdn.net/detail/zzjjiandan/6962939

由于项目需求，在处理文件上传时需要使用到文件的异步上传。这里使用Jquery Ajax File Uploader这个组件下载地址：http://www.phpletter.com/download_project_version.php?version_id=6
服务器端采用struts2来处理文件上传。
所需环境：
jquery.js
ajaxfileupload.js
及struts2-json-plugin-2.1.8.1.jar Spring MVC 也可以
编写文件上传的Action

package com.ajaxfile.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class FileAction extends ActionSupport {

    private File file;
    private String fileFileName;
    private String fileFileContentType;

    private String message = "你已成功上传文件";

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public File getFile() {
        return file;
    }

    public void setFile(File file) {
        this.file = file;
    }

    public String getFileFileName() {
        return fileFileName;
    }

    public void setFileFileName(String fileFileName) {
        this.fileFileName = fileFileName;
    }

    public String getFileFileContentType() {
        return fileFileContentType;
    }

    public void setFileFileContentType(String fileFileContentType) {
        this.fileFileContentType = fileFileContentType;
    }

    @SuppressWarnings("deprecation")
    @Override
    public String execute() throws Exception {

        String path = ServletActionContext.getRequest().getRealPath("/upload");

        try {
            File f = this.getFile();
            if(this.getFileFileName().endsWith(".exe")){
                message="对不起,你上传的文件格式不允许!!!";
                return ERROR;
            }
            FileInputStream inputStream = new FileInputStream(f);
            FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
            byte[] buf = new byte[1024];
            int length = 0;
            while ((length = inputStream.read(buf)) != -1) {
                outputStream.write(buf, 0, length);
            }
            inputStream.close();
            outputStream.flush();
        } catch (Exception e) {
            e.printStackTrace();
            message = "对不起,文件上传失败了!!!!";
        }
        return SUCCESS;
    }

}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
    <package name="struts2" extends="json-default">
        <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
            <result type="json" name="success">
                <param name="contentType">
                    text/html
                </param>
            </result>
            <result type="json" name="error">
                <param name="contentType">
                    text/html
                </param>
            </result>
        </action>
    </package>
</struts>

注意结合Action观察struts.xml中result的配置。

contentType参数是一定要有的，否则浏览器总是提示将返回的JSON结果另存为文件，不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json，而ajaxfileupload则要求为text/html。
文件上传的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <script type="text/javascript">
    function ajaxFileUpload()
    {

        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来

        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json',//返回值类型一般设置为json

                success: function (data, status)  //服务器成功响应处理函数
                {
                    alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量

                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.message);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )

        return false;

    }
    </script>
    </head>
    <body>
        <img src="loading.gif" id="loading" style="display: none;">
        <input type="file" id="file" name="file" />
        <br />
        <input type="button" value="上传" onclick="return ajaxFileUpload();">
    </body>
</html>

Spring MVC 代码

@RequestMapping(value="/uploadFile")
@ResponseBody
public Object uploadFile(HttpServletRequest request, HttpServletResponse response, @RequestParam("theFile") MultipartFile file) throws Exception {
File webUpdateFile = null;
boolean usable = false;

JSONObject result = new JSONObject() ;
try {
//判断上传文件的大小
if (file.getSize() > MAX_SIZE) {
//toLog(AuditCategoryDefinition.SYS_UPGRADE, "服务器升级", "服务器升级上传文件",getUserSID(request).getUserName(), false,Severity.HIGH);
//log.warn("服务器升级上传的文件过大");
result.put("resultLoad", "tooLarge");
return result ;
}
//获取文件名称
String fileName=file.getOriginalFilename();
//获取文件数据
byte[] fileData=file.getBytes();

File dirFile = new File(EXTURL);
if (!dirFile.exists()) {
dirFile.mkdirs();
}
webUpdateFile = new File(EXTURL + fileName);
//将上传的文件写入指定的文件夹
file.transferTo(webUpdateFile);

注意：2014年2月21日，最经典的错误终于找到原因所在了。firefox,'google浏览器报的错误(或者是没反应，不正常)，非常经典，
不知道是我的版本问题还是真正存在的问题。这个问题的根源经过N次上传才找到问题的根本所在。答案是：

最近在使用ajaxFileUpload插件做文件上传时，后端返回json格式的数据，js代码如下：

Js代码  

function ajaxFileUpload() {  

  $.ajaxFileUpload  

    (  

      {  

        url: '/upload',  

        secureuri: false,  

        fileElementId: 'file_field',  

        dataType: 'json', //这里选择了json  

        success: function (data, status) {  

          alert(data);  

        },  

        error: function (data, status, e) {  

           alert(e);  

        }  

      }  

    )  

}

结果在chrome和FireFox浏览器出现如下错误：

先在网上找了下解决办法，stackoverflow上有说修改ajaxFileUpload源码的方法，试了下，不能用，问题依旧，只能自己排查下原因了。从错误提示上看有点像是json数据中出现了<（尖括号），为了看到json数据，将js修改如下：

Js代码  

function ajaxFileUpload() {  

  $.ajaxFileUpload  

    (  

      {  

        url: '/upload',  

        secureuri: false,  

        fileElementId: 'file_field',  

        dataType: 'content', //这里修改为content  

        success: function (data, status) {  

          alert(data);  

        },  

        error: function (data, status, e) {  

           alert(e);  

        }  

      }  

    )  

}

结果返回的json数据如猜测，json数据被包含在一个<pre></pre>的标签中，如下图：

网上查了下原因，是因为Server端的Response上加上了contentType="application/json"。但有时后端这么做是必须的，所以修改ajaxFileUpload源码，将<pre></pre>标签去掉，如下：

Js代码  

uploadHttpData: function( r, type ) {  

        var data = !type;  

        data = type == "xml" || data ? r.responseXML : r.responseText;  

        // If the type is "script", eval it in global context  

        if ( type == "script" )  

            jQuery.globalEval( data );  

        // Get the JavaScript object, if JSON is used.  

        if ( type == "json" ) {  

             ////////////以下为新增代码///////////////  

             data = r.responseText;  

             var start = data.indexOf(">");  

             if(start != -1) {  

               var end = data.indexOf("<", start + 1);  

               if(end != -1) {  

                 data = data.substring(start + 1, end);  

                }  

             }  

              ///////////以上为新增代码///////////////  

              eval( "data = " + data);  

        }  

        // evaluate scripts within html  

        if ( type == "html" )  

            jQuery("<div>").html(data).evalScripts();  

        return data;  

    }

至此，大工告成，ajaxFileUpload的dataType正常使用json。
P.S. 后端使用Spring MVC 3，采用rest风格

【上篇】jQuery中$.get、$.post、$.getJSON、$.ajax 方法详解 jQuery中$.get、$.post、$.getJSON、$.ajax 方法详解
【下篇】ORA-00001: 违反唯一约束条件 (STDWX_DATA.PK_LIB_STD)

作者: neomophatte

该日志由 neomophatte 于6年前发表在综合分类下，最后更新于 2018年05月23日.
转载请注明: jquery之ajaxfileupload异步上传插 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

jquery之ajaxfileupload异步上传插

作者: neomophatte

书签

最新文章New

本站推荐

返回首页