多图片上传预览删除

上传效果图如下：

插件下载地址：http://download.youkuaiyun.com/download/lethe0624/10151406

js文件可按需求进行修改
$(function () {
    var delParent;
    var defaults = {
        fileType: ["jpg", "png", "bmp", "jpeg"],   // 上传文件的类型
        fileSize: 1024 * 1024 * 10                  // 上传文件的大小 10M
    };
    /*点击图片的文本框*/
    $(".file").change(function () {
        var idFile = $(this).attr("id");
        var file = document.getElementById(idFile);
        var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
        var fileList = file.files; //获取的图片文件
        var input = $(this).parent();//文本框的父亲元素
        var imgArr = [];
        //遍历得到的图片文件
        var numUp = imgContainer.find(".up-section").length;
        var totalNum = numUp + fileList.length;  //总的数量
        if (fileList.length > 5 || totalNum > 5) {
            alert("上传图片数目不可以超过4个，请重新选择");  //一次选择上传超过10个 或者是已经上传和这次上传的到的总数也不可以超过10个
        } else if (numUp < 5) {
            fileList = validateUp(fileList);
            //$("#theForm").append($(this).clone().attr("id", Math.random()).css("display", "none"));

            for (var i = 0; i < fileList.length; i++) {
                var form = new FormData();
                form.append("imgFile", fileList[i]);
                $.ajax({
                    url: "http://localhost:8080/seller/goodsImagesUpload.htm",
                    type: 'POST',
                    data: form,
                    processData: false,
                    contentType: false,
                    beforeSend: function () {
                        console.log("正在进行，请稍候");
                    },
                    success: function (result) {
                        var data = $.parseJSON(result)
                        if (data.code === 0) {
                            console.log(data)
                        }
                    },
                    error: function (result) {
                        console.log("error");
                    }
                })
            }
            for (var i = 0; i < fileList.length; i++) {
                var imgUrl = window.URL.createObjectURL(fileList[i]);
                imgArr.push(imgUrl);
                var $section = $("<section class='up-section fl loading'>");
                imgContainer.prepend($section);
                var $span = $("<span class='up-span'>");
                $span.appendTo($section);

                var $img0 = $("<img class='close-upimg'>").on("click", function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    $(".works-mask").show();
                    delParent = $(this).parent();
                });
                $img0.attr("src", "../resources/style/system/front/default/images/img/a7.png").appendTo($section);
                var $img = $("<img class='up-img up-opcity'>");
                $img.attr("src", imgArr[i]);
                $img.appendTo($section);
                var $p = $("<p class='img-name-p'>");
                $p.html(fileList[i].name).appendTo($section);
                var $input = $("<input id='taglocation' name='taglocation' value='' type='hidden'>");
                $input.appendTo($section);
                var $input2 = $("<input id='tags' name='tags' value='' type='hidden'/>");
                $input2.appendTo($section);
            }
        }
        setTimeout(function () {
            $(".up-section").removeClass("loading");
            $(".up-img").removeClass("up-opcity");
        }, 450);
        numUp = imgContainer.find(".up-section").length;
        if (numUp >= 10) {
            $(this).parent().hide();
        }
    });


    $(".z_photo").delegate(".close-upimg", "click", function () {
        $(".works-mask").show();
        delParent = $(this).parent();
    });

    $(".wsdel-ok").click(function () {
        $(".works-mask").hide();
        var numUp = delParent.siblings().length;
        if (numUp < 11) {
            delParent.parent().find(".z_file").show();
        }
        delParent.remove();
    });

    $(".wsdel-no").click(function () {
        $(".works-mask").hide();
    });

    function validateUp(files) {
        // debugger;
        var arrFiles = [];//替换的文件数组
        for (var i = 0, file; file = files[i]; i++) {
            //获取文件上传的后缀名
            var newStr = file.name.split("").reverse().join("");
            if (newStr.split(".")[0] != null) {
                var type = newStr.split(".")[0].split("").reverse().join("");
                console.log(type + "===type===");
                if (jQuery.inArray(type, defaults.fileType) > -1) {
                    // 类型符合，可以上传
                    if (file.size >= defaults.fileSize) {
                        alert(file.size);
                        alert('您这个"' + file.name + '"文件大小过大');
                    } else {
                        // 在这里需要判断当前所有文件中
                        arrFiles.push(file);
                    }
                } else {
                    alert('您这个"' + file.name + '"上传类型不符合');
                }
            } else {
                alert('您这个"' + file.name + '"没有类型, 无法识别');
            }
        }
        return arrFiles;
    }
})

上传主要代码

public ModelAndView store_imgs_save(@RequestParam("file") MultipartFile[] files, HttpServletRequest request,HttpServletResponse response) {
String uploadFilePath = this.configService.getSysConfig().getUploadFilePath();
        String saveFilePathName = request.getSession().getServletContext().getRealPath("/") + uploadFilePath
                + File.separator + "store_slide";
        System.out.println("saveFilePathName=========" + saveFilePathName);
        // 判断file数组不能为空并且长度大于0
        if (files != null && files.length > 0) {
            // 循环获取file数组中得文件
            for (int i = 0; i < files.length; i++) {
                MultipartFile file = files[i];
                try {
                    // 获取存取路径
                    String filePath = saveFilePathName + "//" + file.getOriginalFilename();
                    // String filePath = request.getSession().getServletContext().getRealPath("/") +
                    // "upload/" + file.getOriginalFilename();
                    // 转存文件
                    file.transferTo(new File(filePath));
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }

Stping.xml配置
    <!--文件上传设置-->
    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize">
            <value>10485760</value><!-- 文件上传最大为10M -->
        </property>
        <property name="maxInMemorySize" value="4096" />
        <property name="resolveLazily" value="true" />
    </bean>

js简单图片上传预览：

<body>
    <input type="file">
    <br>
    <div id="preview"></div>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $("input:file").change(function(e){
            //var f = $("input:file").val();
            var file = e.target.files[0];
            var img = new Image(), url = img.src = URL.createObjectURL(file);
            var $img = $(img);
            img.onload = function() {
                URL.revokeObjectURL(url);
                $("#preview").html($img);
            }
        });

    </script>
</body>