FastDFS上传文件二 : 多文件上传

FastDFS上传文件二 : 多文件上传

第一步 : 编写触发多文件上传的事件源

注意:在上传文件的标签里增加multiple=”multiple”这个属性就可以实现多图上传

<tbody id="tab_2" style="display: none">
    <tr>
        <td width="20%" class="pn-flabel pn-flabel-h">
            <span class="pn-frequired">*</span>
            上传商品图片(90x150尺寸):</td>
            <td width="80%" class="pn-fcontent">
            注:该尺寸图片必须为90x150。
        </td>
    </tr>
    <tr>
        <td width="20%" class="pn-flabel pn-flabel-h"></td>
            <td width="80%" class="pn-fcontent">

            <!-- multiple="multiple"这个属性就可以实现多图上传了 -->
            <input type="file" onchange="uploadPic()" name="pics" multiple="multiple" />

        </td>
    </tr>
</tbody>

第二步 : 编写多文件上传的事件函数

//上传多张图片
function uploadPic(){
    //上传图片异步的Jquery.form.js
    var options = {
            url : "/uploadFiles.do",
            type : "post",
            dataType : "json",
            success : function(data){
                //多图片回显
                var html = '<tr>'
                         + '<td width="20%" class="pn-flabel pn-flabel-h"></td>'
                         + '<td width="80%" class="pn-fcontent">';
                for(var i=0;i<data.length;i++){
                    html += '<img width="100" height="100" src="' + data[i] + '" />'
                         +  '<input type="hidden" name="imgUrl" value="' + data[i] + '"/>'
                }
                html += '<a href="javascript:;" class="pn-opt" onclick="jQuery(this).parents(\'tr\').remove()">删除</a>'
                     +  '</td>'
                     +  '</tr>';
                //回显
                $("#tab_2").append(html);

            }
    }
    $("#jvForm").ajaxSubmit(options);
}

第三步 : 编写多文件上传的java代码

// 同时上传多个文件
@RequestMapping(value = "/uploadFiles.do")
@ResponseBody
public List<String> uploadFiles(@RequestParam MultipartFile[] mpfs)
        throws FileNotFoundException, IOException, Exception {

    // 上传文件返回的路径集合
    List<String> arrayList = new ArrayList<String>();

    for (MultipartFile mpf : mpfs) {

        // 将文件上传到分布式文件系统，并返回文件的存储路径及名称
        String uploadFile = FastDFSTool.uploadFile(mpf.getBytes(),
                mpf.getOriginalFilename());

        System.out.println(uploadFile);

        // 返回json格式的字符串（图片的绝对网络存放地址）
        arrayList.add(Constants.FDFS_SERVER + uploadFile);
    }
    return arrayList;
}