jquery ajaxfileupload异步上传插件


Posted in jQuery onNovember 21, 2017

本文实例为大家分享了ajaxfileupload异步上传插件的使用方法,供大家参考,具体内容如下

服务器端采用struts2来处理文件上传。

所需环境:
jquery.js
ajaxfileupload.js
struts2所依赖的jar包
及struts2-json-plugin-2.1.8.1.jar

编写文件上传的Action

package com.ajaxfile.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

@SuppressWarnings("serial")
public class FileAction extends ActionSupport {

  private File file;
  private String fileFileName;
  private String fileFileContentType;

  private String message = "你已成功上传文件";
  
  public String getMessage() {
    return message;
  }

  public void setMessage(String message) {
    this.message = message;
  }

  public File getFile() {
    return file;
  }

  public void setFile(File file) {
    this.file = file;
  }

  public String getFileFileName() {
    return fileFileName;
  }

  public void setFileFileName(String fileFileName) {
    this.fileFileName = fileFileName;
  }

  public String getFileFileContentType() {
    return fileFileContentType;
  }

  public void setFileFileContentType(String fileFileContentType) {
    this.fileFileContentType = fileFileContentType;
  }

  @SuppressWarnings("deprecation")
  @Override
  public String execute() throws Exception {
    
    String path = ServletActionContext.getRequest().getRealPath("/upload");

    try {
      File f = this.getFile();
      if(this.getFileFileName().endsWith(".exe")){
        message="对不起,你上传的文件格式不允许!!!";
        return ERROR;
      }
      FileInputStream inputStream = new FileInputStream(f);
      FileOutputStream outputStream = new FileOutputStream(path + "/"+ this.getFileFileName());
      byte[] buf = new byte[1024];
      int length = 0;
      while ((length = inputStream.read(buf)) != -1) {
        outputStream.write(buf, 0, length);
      }
      inputStream.close();
      outputStream.flush();
    } catch (Exception e) {
      e.printStackTrace();
      message = "对不起,文件上传失败了!!!!";
    }
    return SUCCESS;
  }

}

struts.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.1//EN" "http://struts.apache.org/dtds/struts-2.1.dtd">
<struts>
  <package name="struts2" extends="json-default">
    <action name="fileUploadAction" class="com.ajaxfile.action.FileAction">
      <result type="json" name="success">
        <param name="contentType">
          text/html
        </param>
      </result>
      <result type="json" name="error">
        <param name="contentType">
          text/html
        </param>
      </result>
    </action>
  </package>
</struts>

注意结合Action观察struts.xml中result的配置。

contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。

文件上传的jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/ajaxfileupload.js"></script>
    <script type="text/javascript">
  function ajaxFileUpload()
  {
    
    $("#loading")
    .ajaxStart(function(){
      $(this).show();
    })//开始上传文件时显示一个图片
    .ajaxComplete(function(){
      $(this).hide();
    });//文件上传完成将图片隐藏起来
    
    $.ajaxFileUpload
    (
      {
        url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
        secureuri:false,//一般设置为false
        fileElementId:'file',//文件上传空间的id属性 <input type="file" id="file" name="file" />
        dataType: 'json',//返回值类型 一般设置为json
        success: function (data, status) //服务器成功响应处理函数
        {
          alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
          
          if(typeof(data.error) != 'undefined')
          {
            if(data.error != '')
            {
              alert(data.error);
            }else
            {
              alert(data.message);
            }
          }
        },
        error: function (data, status, e)//服务器响应失败处理函数
        {
          alert(e);
        }
      }
    )
    
    return false;

  }
  </script>
  </head>
  <body>
    <img src="loading.gif" id="loading" style="display: none;">
    <input type="file" id="file" name="file" />
    <br />
    <input type="button" value="上传" onclick="return ajaxFileUpload();">
  </body>
</html>

注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。

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

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery实现简单评论区功能
Oct 26 jQuery
jquery中有哪些api jQuery主要API
Nov 20 #jQuery
jquery ztree实现右键收藏功能
Nov 20 #jQuery
jQuery实现checkbox的简单操作
Nov 18 #jQuery
基于jquery实现五星好评
Nov 18 #jQuery
jQuery实现滚动效果
Nov 17 #jQuery
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
Nov 14 #jQuery
You might like
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
Javascript 异步加载详解(浏览器在javascript的加载方式)
2012/05/20 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
js处理自己不能定义二维数组的方法详解
2014/03/03 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
详解python中__name__的意义以及作用
2019/08/07 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Linux常见面试题
2013/03/18 面试题
德尔福集团DELPHI的笔试题
2012/02/22 面试题
小学生开学第一课活动方案
2014/03/27 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2015年政风行风工作总结
2015/04/21 职场文书
学习经验交流会策划书
2015/11/02 职场文书