js页面上传多个图片文件的功能

页面的：

<tr>
    <td style="width: 10%; vertical-align:middle;"><font
            color="red">*</font>上传
    </td>
    <td style="width: 90%; vertical-align:middle;" colspan="5">
        <div class="file-box-list cnsAttachInput"
             style="display: inline-block;margin: 0px"></div>
        <div style="display: inline-block" class="file-box">
            <input type="file" name="files" id="cnsAttachInput"
                   οnchange="UploadFile('cnsAttachInput','cnsAttach')"
                   style="opacity: 0;">
                <input type="hidden" id="cnsAttach" name="cnsAttach"
                    value="${ds.cnsAttach}">  //上传时候返回显示用
        </div>
    </td>
</tr>

js:UploadFile 方法：

function UploadFile(id, name) {
    var fileName = $("#" + id).val();
    if (fileName == null || fileName == "") {
        return false;
    }
    if (!(/\.(jpe?g|gif|png|ico)$/i).test(fileName)) {
        alert("请上传图片");
        $("#" + id).val("");
        return false;
    }
    $.ajaxFileUpload({
        url: window.apppath + "/admin/api/approval/induction/upload?path=attach&createThumbnail=true&thumbnailWidth=80&thumbnailHeight=80",
        secureuri: false,
        fileElementId: id,//file控件id
        dataType: 'json',
        success: function (data, status) {
            if (data.error == 0) {
                fileName = fileName.substr(fileName.lastIndexOf("\\") + 1, fileName.length - 1);
                var html = "";
                if (!(/\.(jpe?g|gif|png|ico)$/i).test(fileName)) {
                    html = "<label style='margin: 0px;    vertical-align: top'>" + fileName + "<a style='text-decoration: none' data='" + data.url + "' class='remove'>&times;</a></label>"
                }
                else {
                    var path = data.url.substr(0, data.url.lastIndexOf(".")) + "_80_80" + data.url.substr(data.url.lastIndexOf("."))
                    html = "<div class='file-div''><a target='_blank' href='" + window.apppath + data.url + "'><img class='uploadImg' src='" + window.apppath + path + "'></a><a style='text-decoration: none;display: none' data='" + data.url + "' class=' remove removeImg'></a></div>"
                }
                $("." + id + "").append(html);
                $(".remove").click(function () {
                    var url = $(this).attr("data");
                    $(this).parent().remove();
                    var urls = $("input[name=" + name + "]").val();
                    urls = urls.replace(url + ",", "")
                    $("input[name=" + name + "]").val(urls);
                });
                $(".uploadImg").hover(function () {
                    $(this).parent().parent().find(".remove").css("display", "inherit");
                })
                $(".remove").hover(function () {
                }, function () {
                    $(this).hide();
                })
                $("#" + id).val("");
                $("input[name=" + name + "]").val($("input[name=" + name + "]").val() + data.url + ",");
            }
        }
    });

后台控制类里upload：

@RequestMapping(value = "upload")
@ResponseBody
public UploadResult uploadFile(HttpServletRequest request, @RequestParam("files") MultipartFile files, @RequestParam("path") String path,
                               @RequestParam(value = "createThumbnail", defaultValue = "false", required = false) boolean createThumbnail,
                               @RequestParam(value = "thumbnailWidth", defaultValue = "200", required = false) Integer thumbnailWidth,
                               @RequestParam(value = "thumbnailHeight", defaultValue = "300", required = false) Integer thumbnailHeight) {
    UploadResult res = new UploadResult();
    FileUtil util = new FileUtil();
    JsonResult jsonResult = util.saveFile(request, files, "/file/approval/induction/" + path + "/", createThumbnail, thumbnailWidth, thumbnailHeight);
    if (jsonResult.isSuccess()) {
        res.markSuccess(jsonResult.getData().toString());
    } else {
        res.markError(jsonResult.getMessage());
    }
    return res;
}