JQuery的ajaxFileUpload的使用

Posted 2020-11-06 大圣

通过查看插件的源码发现，插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交，获得返回值；

第一步：

首先想要使用ajaxFileUpload插件必须要在html中引入两个js(具体的URI根据自己的项目结构进行调整)；

引入 JQuery和 ajaxfileupload.js 即可；

第二步：

上传的input的html的代码

<div class="form-group">
     <label for="name"  class="col-sm-3 control-label">上传头像</label>
           <div class="col-sm-8">
                <img id="image" class="cover-radius"  src="${basePath}/resources/bussiness/image/upload_img.png"
                           width="100%" style="cursor: pointer;" />
                <input id="picture_upload" name="file" type="file" onchange="upload_cover(this)"
                           style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; cursor: pointer;"/>
                <small class="help-block cover-tips" style="color: #dd4b39;display: none;">请上传照片</small>
           </div>
 </div>

第三步：

js的代码，在js中我加入了图片的格式的验证

function upload_cover(obj) {
        ajax_upload(obj.id, function(data) { //function(data)是上传图片的成功后的回调方法
            var isrc = data.relatPath.replace(/\\/\\//g, \'/\'); //获取的图片的绝对路径
            $(\'#image\').attr(\'src\', basePath+isrc).data(\'img-src\', isrc); //给<input>的src赋值去显示图片
        });
    }
    function ajax_upload(feid, callback) { //具体的上传图片方法
        if (image_check(feid)) { //自己添加的文件后缀名的验证
            $.ajaxFileUpload({
                fileElementId: feid,    //需要上传的文件域的ID，即<input type="file">的ID。
                url: basePath+\'/houseKeeping/clean/upload\', //后台方法的路径
                type: \'post\',   //当要提交自定义参数时，这个参数要设置成post
                dataType: \'json\',   //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
                secureuri: false,   //是否启用安全提交，默认为false。
                async : true,   //是否是异步
                success: function(data) {   //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
                    if (callback) callback.call(this, data);
                },
                error: function(data, status, e) {  //提交失败自动执行的处理函数。
                    console.error(e);
                }
            });
        }
    }
    function image_check(feid) { //自己添加的文件后缀名的验证
        var img = document.getElementById(feid);
        return /.(jpg|png|gif|bmp)$/.test(img.value)?true:(function() {
            modals.info(\'图片格式仅支持jpg、png、gif、bmp格式，且区分大小写。\');
            return false;
        })();
    }

第四步：
上传图片的后台的代码：后台使用的是SpringMVC框架，我是文件上传到服务器后，新建一个文件夹将图片存储，然后将图片的相对路径存到数据库中，

想要显示的时候就去数据库中查找绝对路径。（具体的上传图片根据自己的项目去使用具体的方法，我的可以提供一种思路）

//上传图片
    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> upload(HttpServletRequest request) throws Exception {
        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        CommonsMultipartFile file = (CommonsMultipartFile) multipartRequest.getFile("file");

        String rootDir = request.getRealPath("/");
        String relatDir = File.separator+"resources"+File.separator+"bussiness"
                +File.separator+"uploadPath"+File.separator+"houseKeeping_imgs";

        //文件夹不存在则创建
        File fdir = new File(rootDir+relatDir);
        if (!fdir.exists()) { fdir.mkdirs(); }

        String oriName = file.getOriginalFilename();
        String newName = new Date().getTime()+"_"+oriName;
        File tempFile = new File(fdir.getPath()+File.separator+newName);
        file.transferTo(tempFile);

        Map<String, String> result = new HashMap<>();
        result.put("oriName", oriName);
        result.put("realName", tempFile.getName());
        result.put("relatPath", relatDir+File.separator+newName);
        return result;
    }

插件所需的资源地址如下：(输入链接可以下载)

http://files.cnblogs.com/files/zhanghaoliang/%E6%8F%92%E4%BB%B6%E6%89%80%E9%9C%80%E7%9A%84%E8%B5%84%E6%BA%90.zip