使用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 相关文章推荐
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js实现异步循环实现代码
Feb 16 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
Apr 20 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
js瀑布流布局的实现
Jun 28 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
做一个有下拉功能的留言版
2006/10/09 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
PHP错误Warning: Cannot modify header information - headers already sent by解决方法
2014/09/27 PHP
php类自动加载器实现方法
2015/07/28 PHP
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
微信小程序左滑动显示菜单功能的实现
2018/06/14 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[02:23]2018DOTA2亚洲邀请赛趣味视频——反应测试
2018/04/04 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
Python常见异常分类与处理方法
2017/06/04 Python
利用python爬取斗鱼app中照片方法实例
2017/12/03 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
Python实现序列化及csv文件读取
2020/01/19 Python
python小白切忌乱用表达式
2020/05/29 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
音乐学院硕士生的自我评价分享
2013/11/01 职场文书
人事专员的职责
2014/02/26 职场文书
如何写自我鉴定
2014/03/19 职场文书
团队拓展活动总结
2014/08/27 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
同学聚会邀请函
2015/01/30 职场文书
经营场所证明范本
2015/06/19 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android