js 上传 java javascript纯js上传文件

转载

kcoufee 2024-03-14 22:45:48

文章标签 js 上传 java ajax html html5 上传 文章分类 Java 后端开发

javaweb上传文件

上传文件的jsp中的部分

上传文件同样可以使用form表单向后端发请求，也可以使用 ajax向后端发请求

1.通过form表单向后端发送请求

<form id="postForm" action="${pageContext.request.contextPath}/UploadServlet" method="post" enctype="multipart/form-data">
            <div class="bbxx wrap">
                <inputtype="text" id="side-profile-name" name="username" class="form-control">
                <inputtype="file" id="example-file-input" name="avatar">
                <button type="submit" class="btn btn-effect-ripple btn-primary">Save</button>
            </div>
        </form>
改进后的代码不需要form标签，直接由控件来实现。开发人员只需要关注业务逻辑即可。JS中已经帮我们封闭好了
    this.post_file = function ()
    {
        $.each(this.ui.btn, function (i, n) { n.hide();});
        this.ui.btn.stop.show();
        this.State = this.Config.state.Posting;//
        this.app.postFile({ id: this.fileSvr.id, pathLoc: this.fileSvr.pathLoc, pathSvr:this.fileSvr.pathSvr,lenSvr: this.fileSvr.lenSvr, fields: this.fields });
    };
通过监控工具可以看到控件提交的数据，非常的清晰，调试也非常的简单。
2.通过ajax向后端发送请求
            $.ajax({
                 url : "${pageContext.request.contextPath}/UploadServlet",
                 type : "POST",
                 data : $( '#postForm').serialize(),
                 success : function(data) {
                      $( '#serverResponse').html(data);
                 },
                 error : function(data) {
                      $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
                 }
            });
ajax分为两部分，一部分是初始化，文件在上传前通过AJAX请求通知服务端进行初始化操作
    this.md5_complete = function (json)
    {
        this.fileSvr.md5 = json.md5;
        this.ui.msg.text("MD5计算完毕，开始连接服务器...");
        this.event.md5Complete(this, json.md5);//biz event
        var loc_path = encodeURIComponent(this.fileSvr.pathLoc);
        var loc_len = this.fileSvr.lenLoc;
        var loc_size = this.fileSvr.sizeLoc;
        var param = jQuery.extend({}, this.fields, this.Config.bizData, { md5: json.md5, id: this.fileSvr.id, lenLoc: loc_len, sizeLoc: loc_size, pathLoc: loc_path, time: new Date().getTime() });
        $.ajax({
            type: "GET"
            , dataType: 'jsonp'
            , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
            , url: this.Config["UrlCreate"]
            , data: param
            , success: function (sv)
            {
                _this.svr_create(sv);
            }
            , error: function (req, txt, err)
            {
                _this.Manager.RemoveQueuePost(_this.fileSvr.id);
                alert("向服务器发送MD5信息错误！" + req.responseText);
                _this.ui.msg.text("向服务器发送MD5信息错误");
                _this.ui.btn.cancel.show();
                _this.ui.btn.stop.hide();
            }
            , complete: function (req, sta) { req = null; }
        });
    };
在文件上传完后向服务器发送通知
    this.post_complete = function (json)
    {
        this.fileSvr.perSvr = "100%";
        this.fileSvr.complete = true;
        $.each(this.ui.btn, function (i, n)
        {
            n.hide();
        });
        this.ui.process.css("width", "100%");
        this.ui.percent.text("(100%)");
        this.ui.msg.text("上传完成");
        this.Manager.arrFilesComplete.push(this);
        this.State = this.Config.state.Complete;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //从未上传列表中删除
        this.Manager.RemoveQueueWait(this.fileSvr.id);
        var param = { md5: this.fileSvr.md5, uid: this.uid, id: this.fileSvr.id, time: new Date().getTime() };
        $.ajax({
            type: "GET"
              , dataType: 'jsonp'
              , jsonp: "callback" //自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
              , url: _this.Config["UrlComplete"]
              , data: param
              , success: function (msg)
              {
                  _this.event.fileComplete(_this);//触发事件
                  _this.post_next();
              }
              , error: function (req, txt, err) { alert("文件-向服务器发送Complete信息错误！" + req.responseText); }
              , complete: function (req, sta) { req = null; }
        });
    };
这里需要处理一个MD5秒传的逻辑，当服务器存在相同文件时，不需要用户再上传，而是直接通知用户秒传
    this.post_complete_quick = function ()
    {
        this.fileSvr.perSvr = "100%";
        this.fileSvr.complete = true;
        this.ui.btn.stop.hide();
        this.ui.process.css("width", "100%");
        this.ui.percent.text("(100%)");
        this.ui.msg.text("服务器存在相同文件，快速上传成功。");
        this.Manager.arrFilesComplete.push(this);
        this.State = this.Config.state.Complete;
        //从上传列表中删除
        this.Manager.RemoveQueuePost(this.fileSvr.id);
        //从未上传列表中删除
        this.Manager.RemoveQueueWait(this.fileSvr.id);
        //添加到文件列表
        this.post_next();
        this.event.fileComplete(this);//触发事件
    };
这里可以看到秒传的逻辑是非常 简单的，并不是特别的复杂。
            var form = new FormData();
            form.append("username","zxj");
            form.append("avatar",file);
            //var form = new FormData($("#postForm")[0]);
            $.ajax({
                url:"${pageContext.request.contextPath}/UploadServlet",
                type:"post",
                data:form,
                processData:false,
                contentType:false,
                success:function(data){
        
                    console.log(data);
                }
            });
java部分
文件初始化的逻辑，主要代码如下
FileInf fileSvr= new FileInf();
fileSvr.id = id;
fileSvr.fdChild = false;
fileSvr.uid = Integer.parseInt(uid);
fileSvr.nameLoc = PathTool.getName(pathLoc);
fileSvr.pathLoc = pathLoc;
fileSvr.lenLoc = Long.parseLong(lenLoc);
fileSvr.sizeLoc = sizeLoc;
fileSvr.deleted = false;
fileSvr.md5 = md5;
fileSvr.nameSvr = fileSvr.nameLoc;
//所有单个文件均以uuid/file方式存储
PathBuilderUuid pb = new PathBuilderUuid();
fileSvr.pathSvr = pb.genFile(fileSvr.uid,fileSvr);
fileSvr.pathSvr = fileSvr.pathSvr.replace("\\","/");
DBConfig cfg = new DBConfig();
DBFile db = cfg.db();
FileInf fileExist = new FileInf();
    
boolean exist = db.exist_file(md5,fileExist);
//数据库已存在相同文件，且有上传进度，则直接使用此信息
if(exist && fileExist.lenSvr > 1)
{
     fileSvr.nameSvr             = fileExist.nameSvr;
     fileSvr.pathSvr        = fileExist.pathSvr;
     fileSvr.perSvr              = fileExist.perSvr;
     fileSvr.lenSvr              = fileExist.lenSvr;
     fileSvr.complete       = fileExist.complete;
     db.Add(fileSvr);
    
     //触发事件
    up6_biz_event.file_create_same(fileSvr);
}//此文件不存在
else
{
     db.Add(fileSvr);
     //触发事件
    up6_biz_event.file_create(fileSvr);
    
     FileBlockWriter fr = new FileBlockWriter();
     fr.CreateFile(fileSvr.pathSvr,fileSvr.lenLoc);
}
接收文件块数据，在这个逻辑中我们接收文件块数据。控件对数据进行了优化，可以方便调试。如果用监控工具可以看到控件提交的数据。
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
FileItemFactory factory = new DiskFileItemFactory();  
ServletFileUpload upload = new ServletFileUpload(factory);
List files = null;
try
{
     files = upload.parseRequest(request);
}
catch (FileUploadException e)
{// 解析文件数据错误 
    out.println("read file data error:" + e.toString());
    return;
  
}
FileItem rangeFile = null;
// 得到所有上传的文件
Iterator fileItr = files.iterator();
// 循环处理所有文件
while (fileItr.hasNext())
{
     // 得到当前文件
     rangeFile = (FileItem) fileItr.next();
     if(StringUtils.equals( rangeFile.getFieldName(),"pathSvr"))
     {
         pathSvr = rangeFile.getString();
         pathSvr = PathTool.url_decode(pathSvr);
     }
}
boolean verify = false;
String msg = "";
String md5Svr = "";
long blockSizeSvr = rangeFile.getSize();
if(!StringUtils.isBlank(blockMd5))
{
     md5Svr = Md5Tool.fileToMD5(rangeFile.getInputStream());
}
verify = Integer.parseInt(blockSize) == blockSizeSvr;
if(!verify)
{
     msg = "block size error sizeSvr:" + blockSizeSvr + "sizeLoc:" + blockSize;
}
if(verify && !StringUtils.isBlank(blockMd5))
{
     verify = md5Svr.equals(blockMd5);
     if(!verify) msg = "block md5 error";
}
if(verify)
{
     //保存文件块数据
     FileBlockWriter res = new FileBlockWriter();
     //仅第一块创建
     if( Integer.parseInt(blockIndex)==1) res.CreateFile(pathSvr,Long.parseLong(lenLoc));
     res.write( Long.parseLong(blockOffset),pathSvr,rangeFile);
     up6_biz_event.file_post_block(id,Integer.parseInt(blockIndex));
    
     JSONObject o = new JSONObject();
     o.put("msg", "ok");
     o.put("md5", md5Svr); 
     o.put("offset", blockOffset);//基于文件的块偏移位置
     msg = o.toString();
}
rangeFile.delete();
out.write(msg);

注：

1. 上面的java部分的代码可以直接使用，只需要将上传的图片路径及收集数据并将数据写入到数据库即可

2. 上面上传文件使用到了字节流，其实还可以使用别的流，这个需要读者自己在下面完善测试

3. BeanUtils是一个工具便于将实体对应的属性赋给实体

4. 上传文件不能使用 request.getParameter("")获取参数了，而是直接将request解析，通过判断每一项是文件还是非文件，然后进行相应的操作（文件的话就是用流来读取，非文件的话，暂时保存到一个map中。）

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。