使用ajaxfileupload.js实现上传文件功能


Posted in Javascript onAugust 13, 2016

一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会。今天突然要使用这种方式上传文件,期间还遇到点问题。因此就记录下来,方便以后遇到这样的问题可以查看。

首先就是引入js和ajaxfileupload的文件,这个不需要多说。

然后就是ajax请求后台地址。代码如下: 

<div class="btn-file-box pos-rel">
   <input type="file" id="upload" name="upload" style="font-size: 0;opacity: 0;width: 100%;height: 100%;position: absolute;left: 0;top: 0;"/>
 <span class="btn ">选择文件</span>
 </div> 


$("#upload").on("change",function(){
    $.ajaxFileUpload({
      url : '/test/user/imgUpload',//后台请求地址
      type: 'post',//请求方式 当要提交自定义参数时,这个参数要设置成post
      secureuri : false,//是否启用安全提交,默认为false。 
      fileElementId : 'upload',// 需要上传的文件域的ID,即<input type="file">的ID。
      dataType : 'json',//服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。如果json返回的带pre,这里修改为json即可解决。
      success : function (json, status) {//提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
         alert(json.retMsg);
      },
      error : function (json, status, e) {//提交失败自动执行的处理函数。
        
      }
    });
  });

前台代码完成就开始开发后台代码了。

package com.roc.test;import java.io.File;import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.ws.rs.Consumes;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.QueryParam;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import net.sf.json.JSONObject;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.jboss.resteasy.annotations.providers.jaxb.json.BadgerFish;
import org.springframework.stereotype.Controller;import net.sf.json.JSONObject;/**
 * 上传文件
 * @author liaowp
 *
 */
@Controller
@Path("/user")
public class UploadImg {
  
  @Path("/imgUpload")
  @POST
  @Produces("application/json; charset=utf-8")
  @Consumes(MediaType.MULTIPART_FORM_DATA ) 
  @BadgerFish
  public JSONObject upload(@QueryParam("orderId") String orderId,@Context HttpServletRequest request,@Context HttpServletResponse response) {
    JSONObject jsonobj = new JSONObject();
    String file_path=request.getSession().getServletContext().getRealPath("/")+File.separator+"corpfile"+File.separator;//文件存储路径  
    String upload_file_path="";
    File file =new File(file_path);  
    if(!file.exists() && !file.isDirectory()){ //如果文件夹不存在则创建    
       file.mkdir();
       upload_file_path=file_path;
    }else{
       upload_file_path=file_path;
    }
    DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置工厂 
    factory.setRepository(new File(file_path));// 设置文件存储位置
    factory.setSizeThreshold(2048 * 1024);// 设置大小,如果文件小于设置大小的话,放入内存中,如果大于的话则放入磁盘中
    ServletFileUpload upload = new ServletFileUpload(factory);
    upload.setHeaderEncoding("utf-8");// 这里就是中文文件名处理的代码,其实只有一行
    String fileName = "";
    List<FileItem> list;
    JSONObject jsonobj = new JSONObject();
    try {
      list = upload.parseRequest(request);
      for (FileItem item : list) {
        if (item.isFormField()) {
          String name = item.getFieldName();
          String value = item.getString("utf-8");
        } else {
          String name = item.getFieldName();
          String value = item.getName();
          fileName =name + ".jpg";
          if (item.getSize() > 10485760) {//您好,上传文件要小于10M!
            jsonobj.put("retCode","100");
            jsonobj.put("retMsg","您好,上传文件要小于10M!"):
          } else {//上传成功
            item.write(new File(upload_file_path, fileName));
            System.out.println(File.separator + "corpfile" + File.separator + fileName);
            jsonobj.put("retCode","0");
            jsonobj.put("retMsg","您好,上传成功!");
          }
        }
      }
    } catch (Exception e) {//上传失败
      e.printStackTrace();
      jsonobj.put("retCode","9999");

 jsonobj.put("retMsg","您好,文件上传失败,");
    }
    return jsonobj;
  }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
$.get获取一个文件的内容示例代码
Sep 11 Javascript
Javascript字符串对象的常用方法简明版
Jun 26 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
javascript中sort排序实例详解
Jul 24 Javascript
js实现多行文本框统计剩余字数功能
Mar 28 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
Dec 09 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 #Javascript
漂亮! js实现颜色渐变效果
Aug 12 #Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 #Javascript
jquery表格datatables实例解析 直接加载和延迟加载
Aug 12 #Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 #Javascript
Javascript中的对象和原型(二)
Aug 12 #Javascript
JavaScript中的对象和原型(一)
Aug 12 #Javascript
You might like
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
nodejs中全局变量的实例解析
2017/03/07 NodeJs
vue数字类型过滤器的示例代码
2017/09/07 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
Python字典简介以及用法详解
2016/11/15 Python
python3个性签名设计实现代码
2018/06/19 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
十岁生日父母答谢词
2014/01/18 职场文书
校园之星获奖感言
2014/01/29 职场文书
军训感想500字
2014/02/20 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
电子工程求职信
2014/07/17 职场文书
2015年三万活动总结
2015/03/25 职场文书
《秋思》教学反思
2016/02/23 职场文书
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技