多文件上传

**

文件上传之多图片上传(使用servlet):

**

jar包: commons-io-2.4.jar
commons-fileupload-1.2.2.jar

<form id="form" enctype="multipart/form-data" method="post" action="">
<input type="file" id="xdaTanFileImg" multiple="multiple" accept="image/png" name="fileAttach"
       onchange="xmTanUploadImg(this)"/>
</form>

其中accept后:限制图片格式为png, enctype="multipart/form-data"为必选,缺少则后台接收不到数据

function xmTanUploadImg(obj) {
    var fl = obj.files.length;   //获取file选中的文件长度
    for (var i = 0; i < fl; i++) {
        var file = obj.files[i];
        var reader = new FileReader();

    //读取文件过程方法

    reader.onloadstart = function (e) {
        console.log("开始读取....");
    }
    reader.onprogress = function (e) {
        console.log("正在读取中....");
    }
    reader.onabort = function (e) {
        console.log("中断读取....");
    }
    reader.onerror = function (e) {
        console.log("读取异常....");
    }
    reader.onload = function (e) {
        console.log("成功读取....");

        var imgstr = '<img  src="' + e.target.result + '"/>';
        var oimgbox = document.getElementById("imgboxid");
        var ndiv = document.createElement("div");

        ndiv.innerHTML = imgstr;
        ndiv.className = "img-div";
        oimgbox.appendChild(ndiv);
    }

    reader.readAsDataURL(file);
}

}

将表单进行提交:

var form = new FormData($("#form")[0]); //将表单转化为json格式,可用于文件上传
$.ajax({
    url: "../UpLoadServlet",
    type: "post",
    data: form,
    processData: false,//取消帮我们格式化数据，是什么就是什么
    contentType: false, //ajax2.0可以不用设置请求头，但是jq帮我们自动设置了，这样的话需要我们自己取消掉
    success: function () {
        alert("发布成功");
        $("textarea[name=cont_input]").val("");
        $(".img-box").empty();
        $(".img-box").hide();
    },
    error: function (e) {
        alert("发布失败");
    }
})

processData,contentType这两个参数必要设置,不然会出现后边得不到文件信息

文件上传之后台:

//判断是否添加了enctype属性
boolean isMultiPart = ServletFileUpload.isMultipartContent(request);
if (isMultiPart) {
    //获取文件上传的路径,即文件保存到哪个文件夹下(是服务器中的绝对路径)
    String filePath = request.getServletContext().getRealPath("upload/");
    System.out.println(filePath);
    //获取文件上传的核心对象(工厂模式)
    FileItemFactory factory = new DiskFileItemFactory();
    ServletFileUpload fileUpload = new ServletFileUpload(factory);

    //String userId = request.getSession().getAttribute("");
    String userId = "u123458"; //用户id
    String mid = RandomSuiJi.graphicRandom(); //消息id
    int mfav = 0; //收藏次数
    int mreply = 0; //回复次数
    int mcopy = 0; //转发次数
    int dianZan = 0;//点赞次数
    String mdatetime = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date());
    String mcontent = null; //消息内容
    int quanXian = 3; //观看权限(默认所有人可见)
    String imgpath = null;
    int imgRow = 0;//记录存储图片

    try {
        //获取表单数据
        List<FileItem> fileItems = fileUpload.parseRequest(request);
        Iterator<FileItem> itemIterator = fileItems.iterator();
        Message message = new Message();
        Photo photo = new Photo();
        while (itemIterator.hasNext()) {
            FileItem fileItem = itemIterator.next();
            //区分普通字段跟文件字段
            if (fileItem.isFormField()) {
                //普通字段要封装成对象添加到数据库中
                //内容
                if (fileItem.getFieldName().equals("cont_input")) {
                    // System.out.println("用户名:" + fileItem.getString("UTF-8"));
                    mcontent = fileItem.getString("UTF-8");
                }
                //权限
                if (fileItem.getFieldName().equals("quanXian")) {
                    quanXian = Integer.parseInt(fileItem.getString());
                }
                message.setMid(mid);
                message.setUid(userId);
                message.setMfav(mfav);
                message.setMreply(mreply);
                message.setMcopy(mcopy);
                message.setMdatetime(mdatetime);
                message.setMcontent(mcontent);
                message.setQuanXian(quanXian);
                message.setDianzan(dianZan);

            } else {
                //文件字段要调用方法进行上传
                String filename = fileItem.getName();//客户端文件上传的绝对路径
                File file = new File(filename);
                if (file.getName() != "") {
                    File file1 = new File(filePath, new SimpleDateFormat("yyyyMMddHHmmss").format(new Date()) +file.getName() );//创建 服务器upload文件夹下名为当前时间的文件
                    imgpath = "../upload/" + file1.getName();
                    System.out.println(imgpath);
                    photo.setMid(mid);
                    photo.setPid(RandomSuiJi.graphicRandom());
                    photo.setImgpath(imgpath);
                    imgRow = photoService.addImg(photo);
                    fileItem.write(file1);
                }
            }
        }
        //将消息存到message表
        MessageService messageService = new MessageServiceImpl();
        int row = messageService.insertMess(message);

        if (row > 0) {
            out.print("<script>alert('发布成功')</script>");
            if (imgRow == 0) {
                out.print("<script>alert('图片发布失败')</script>");
            }
        } else {
            out.print("<script>alert('发布失败')</script>");
        }

    } catch (FileUploadException e) {
        e.printStackTrace();
    } catch (Exception e) {
        e.printStackTrace();
        out.print("<script>alert('图片上传失败,请联系管理员');location.href='index.html';</script>");
    }
} else {
    out.print("<script>alert('请添加enctype属性');location.href='index.html';</script>");
}

坑1:将文件的绝对路径保存到了数据库,如数据库长度不合适,会报数据过长,最好使用文件的相对路径
坑2:当使用当前时间来给文件命名时,当创建多个文件时,由于cpu运算速度太快,会导致文件同名从而导致上传的多个文件只保存一个! 解决:使用当前时间加文件名命名