2022-11-23 11:29

ajax上传多个图片

wanmatea

JavaEE

(507)

(0)

收藏

Form表单:

<form action="" method="post" id="myform" name="myform" enctype="multipart/form-data">
<tr>
    <th><i class="require-red">*</i>图片:</th>
    <td>
        <p>
            <div id="imgs"></div>
            <input type="hidden" value="" id="hfImg" name="hfImg">
        </p>
        <input type="file" name="pic" id="pic" multiple>
    </td>
</tr>
</form>


JS代码:

<script type="text/javascript">
    $(function (){
        $("#pic").change(function (){
            var files=$("#pic")[0].files;
            for(var i=0;i<files.length;i++){
                //files[i] File{name: '3.jfif', lastModified: 1663635088185, lastModifiedDate: Tue Sep 20 2022 08:51:28 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 205489,…}
                var value=files[i].name;
                var index=value.lastIndexOf(".");
                var fileext=value.substring(index,value.length);
                if(".jpg.jpeg.png.gif.bmp.webp".indexOf(fileext)==-1){
                    alert("请上传.jpg .jpeg .png .gif .bmp .webp格式的图片");
                    return;
                }
            }
            //创建一个表单的对象 html对象 不能用ajax对象
            var formData=new FormData($("#myform")[0]);
            $.ajax({
                url:"${path}/manage/product?action=updatePic",
                type:"post",
                data:formData,
                async: false, // 设置为同步执行
                contentType:false, //不让ajax指定上传的类型 application/x-www-form-urlencoded
                processData:false, //不让ajax处理上传的数据
                success:function(data){
                    var pics=data.split(",");
                    for(var i=0;i< pics.length;i++){
                        var img=$("<img>");
                        img.attr("src","${path}"+pics[i]);
                        $("#imgs").append(img);
                    }
                    <%--$("#imgUrl").show();--%>
                    <%--$("#imgUrl").attr("src","${path}"+"/"+data);--%>
                    $("#hfImg").val(data);
                }
            });
        });
    });
</script>


Servlet代码:

private void updatePic(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    String filenameStr="";
    //获得上传的对象
    Collection<Part> parts=request.getParts();
    for(Part p:parts){
        if(p.getName().equals("pic")){
            String fileName=p.getSubmittedFileName();
            if(fileName!=null&&fileName!=""){
                System.out.println("==="+fileName);
                String fileext=fileName.substring(fileName.lastIndexOf("."));
                String newFileName=UUID.randomUUID().toString().replace("-","");
                String path=this.getServletContext().getRealPath("/")+"/img/";
                p.write(path+newFileName+fileext);
                p.delete();
                filenameStr+="/img/"+newFileName+fileext+",";
            }
        }
    }
    PrintWriter out=response.getWriter();
    out.print(filenameStr.substring(0,filenameStr.length()-1));
    out.close();
}

最终效果:

image.png 

0条评论

点击登录参与评论