文档章节

使用ajaxfileupload实现文件上传

小林攻城狮
 小林攻城狮
发布于 2018/01/29 22:27
字数 1051
阅读 1932
收藏 1

1.基于普通按钮实现文件上传

基本思路:使用隐藏file域,通过触发change事件实现ajax文件上传

  • 前端页面(基于vue.js)
<input type="file" name="file" id="cover" style="display: none;" @change="uploadCover">
<input type="button" class="btn btn-default btn-sm" value="上传封面" @click="selectCover">
  • js代码
var vm = new Vue({    
    methods: {
        selectCover: function() {
            $('#cover').trigger('click');
        },
        uploadCover: function() {
            if(checkFileExt($('#cover').val(), ['jpg', 'png'])) {
                $.ajaxFileUpload({
                    url: '../../test/upload',
                    type: 'post',
                    fileElementId: ['cover'],
                    dataType: 'json',
                    success: function (data, status) {
                        if(data.code=='0'){
                            dialogMsg(data.msg, 'success');
                        }else{
                            dialogMsg(data.msg, 'error');
                        }
                    },
                    error: function (data, status, e) {
                        dialogMsg(e, 'error')
                    }
                });
            } else {
                dialogMsg('仅支持jpg,png类型!');
            }
            $('#cover').on('change', vm.uploadCover);
        }
    }
})
  • 后台代码(基于springmvc)
    1.Controller
@RequestMapping("/cover/upload")
public R uploadTemplateCover(HttpServletRequest request) {
	String templateId = UUID.randomUUID().toString();
	String templatePath = "/upload/template/" + templateId + "/";
	boolean success = UploadUtils.uploadFile(request, templatePath, "cover");
	if (success) {
		return R.ok("上传封面成功!").put("templateId", templateId).put("path", templatePath);
	}
	return R.error("上传文件失败!");
}

2.UploadUtil

public static boolean uploadFile(HttpServletRequest request, String filePath, String fileName) {
        CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
                request.getSession().getServletContext());
        if (multipartResolver.isMultipart(request)) {
        MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
        String pathDir = getUploadDir(request, filePath);
        File dirFile = new File(pathDir);
        if (!dirFile.isDirectory()) {
            dirFile.mkdirs();
        }
        MultipartFile multipartFile = multiRequest.getFile("file");
        if (multipartFile != null) {
            String name = multipartFile.getOriginalFilename();
            String postFix = name.substring(name.lastIndexOf(".")).toLowerCase();
            String saveName = fileName + postFix;
            String savePath = pathDir + File.separator + saveName;
            File file = new File(savePath);
            file.setWritable(true, false);
            try {
                multipartFile.transferTo(file);
                return true;
            } catch (Exception e) {
                LOG.error(name + "保存失败", e);
            }
        }}
        return false;      
}

public static String getUploadDir(HttpServletRequest request, String path) {
       return request.getServletContext().getRealPath(path);
}

2.解决文件类型判断

  • js方法,具体调用示例见上节
checkFileExt = function(fileName, fileExts) {
    var check = false;
    var index = fileName.lastIndexOf(".");
    var ext = fileName.substr(index+1);
    for(var i=0; i<fileExts.length; i++) {
        if (ext == fileExts[i]) {
            check = true;
            break;
        }
    }
    return check;
}

3.file域change函数只执行一次

  • 问题:ajaxFileUpload 插件会把原来的file元素替换成新的file元素,导致之前绑定的change事件失效
  • 解决办法:在调用逻辑结束后重新绑定change事件

4.ajaxfileupload.js

jQuery.extend({
    createUploadIframe: function (id, uri) {

        //create frame
        var frameId = 'jUploadFrame' + id;
        var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"';
        if (window.ActiveXObject) {
            if (typeof uri == 'boolean') {
                iframeHtml += ' src="' + 'javascript:false' + '"';

            }
            else if (typeof uri == 'string') {
                iframeHtml += ' src="' + uri + '"';

            }
        }
        iframeHtml += ' />';
        jQuery(iframeHtml).appendTo(document.body);

        return jQuery('#' + frameId).get(0);
    },
    createUploadForm: function (id, fileElementId, data, fileElement) {
        //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>');
        if (data) {
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        }
        if (typeof (fileElementId) == 'string') {
            fileElementId = [fileElementId];
        }
        for (var i in fileElementId) {
            var oldElement = jQuery('#' + fileElementId[i]);
            var newElement = jQuery(oldElement).clone(true,true);
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
        }
        //set attributes
        jQuery(form).css('position', 'absolute');
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body');
        return form;
    },

    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 = new Date().getTime()
        var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data), s.fileElement);
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = 'jUploadFrame' + id;
        var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if (s.global && !jQuery.active++) {
            jQuery.event.trigger("ajaxStart");
        }
        var requestDone = false;
        // Create the request object
        var xml = {}
        if (s.global)
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function (isTimeout) {
            var io = document.getElementById(frameId);
            try {
                if (io.contentWindow) {
                    xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                    xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;

                } else if (io.contentDocument) {
                    xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                    xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                }
            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
            if (xml || isTimeout == "timeout") {
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if (status != "error") {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData(xml, s.dataType);
                        // If a local callback was specified, fire it and pass it the data
                        if (s.success)
                            s.success(data, status);

                        // Fire the global callback
                        if (s.global)
                            jQuery.event.trigger("ajaxSuccess", [xml, s]);
                    } else
                        jQuery.handleError(s, xml, status);
                } catch (e) {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }

                // The request was completed
                if (s.global)
                    jQuery.event.trigger("ajaxComplete", [xml, s]);

                // Handle the global AJAX counter
                if (s.global && ! --jQuery.active)
                    jQuery.event.trigger("ajaxStop");

                // Process result
                if (s.complete)
                    s.complete(xml, status);

                jQuery(io).unbind()

                setTimeout(function () {
                    try {
                        jQuery(io).remove();
                        jQuery(form).remove();

                    } catch (e) {
                        jQuery.handleError(s, xml, null, e);
                    }

                }, 100)

                xml = null

            }
        }
        // Timeout checker
        if (s.timeout > 0) {
            setTimeout(function () {
                // Check to see if the request is still happening
                if (!requestDone) uploadCallback("timeout");
            }, s.timeout);
        }
        try {

            var form = jQuery('#' + formId);
            jQuery(form).attr('action', s.url);
            jQuery(form).attr('method', 'POST');
            jQuery(form).attr('target', frameId);
            if (form.encoding) {
                jQuery(form).attr('encoding', 'multipart/form-data');
            }
            else {
                jQuery(form).attr('enctype', 'multipart/form-data');
            }
            jQuery(form).submit();

        } catch (e) {
            jQuery.handleError(s, xml, null, e);
        }

        jQuery('#' + frameId).load(uploadCallback);
        return {
            abort: function () {
                try {
                    jQuery('#' + frameId).remove();
                    jQuery(form).remove();
                }
                catch (e) { }
            }
        };
    },

    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;
    },

    handleError: function (s, xml, status, e) {
        // If a local callback was specified, fire it
        if (s.error)
            s.error(xml, status, e);

        // Fire the global callback
        if (s.global)
            jQuery.event.trigger("ajaxError", [xml, s, e]);
    }
});

© 著作权归作者所有

小林攻城狮
粉丝 21
博文 13
码字总数 3903
作品 0
程序员
私信 提问
加载中

评论(1)

田大娃
xhr.responseJSON is undefined
jQuery插件AjaxFileUpload实现ajax文件上传

1、引入AjaxFileUpload插件相关的js <script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script><script type="text/javascript" src="<%=basePath%>resou......

刘yu
2015/04/22
255
0
ajaxFileUpload图片上传、限制后缀和张数 带参数

ajaxFileUpload图片上传、限制后缀和张数 带参数 HTML: <input type="file" name="img" id="fileToUpload" style="width:180px;" onchange="ajaxFileUpload(this);" /><span class="info">(......

markYun
2013/09/07
7.8K
1
Spring Jackson AjaxFileUpload 没有执行回调函数的解决办法

在使用Spring MVC+Jackson与AjaxFileUpload进行图片上传并返回图片地址时,图片上传没有问题,但是ajaxfileupload的success回调并没有执行,找了半天没找到原因,firebug显示response的json也...

方绍伟
2013/10/21
196
0
ajaxFileUpload.js 使用报错

按照网上写的配置了ajaxFileUpload ,但是一点上传按钮就报错:TypeError: $.ajaxFileUpload is not a function function ajaxFileUpload(){ $("#loading").ajaxStart(function(){ $(this).......

menxin
2014/02/19
4.8K
5
文件上传,因为业务需要,需要读取excel流2次,在第二次读取的时候,用chrome就会丢失

struts2文件上传,用的ajaxfileupload插件进行上传,因为业务需要,判断是否继续上传文件,如果选择了是,则再一次进行ajaxfileupload提交,读取流,而这种情况出现在chrome浏览器就出现流丢...

tym33
2015/08/14
93
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
533
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
31
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
16
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
47
0
maven 环境隔离

解决问题 即 在 resource 文件夹下面 ,新增对应的资源配置文件夹,对应 开发,测试,生产的不同的配置内容 <resources> <resource> <directory>src/main/resources.${deplo......

之渊
昨天
56
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部