使用Ajaxupload.js上传文件
来源:互联网 发布:php 网站框架 编辑:程序博客网 时间:2024/05/16 01:08
版权声明:本文为博主原创文章,未经博主允许不得转载。
ajaxupload.js 是一款使用jQuery上传文件的js插件,对于简单的文件上传,足够可以应付。
该插件主要有以下几个选项:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
settings = {
action: 'upload.PHP', //要提交的地址
name: 'userfile',//参数名次
data: {},//和文件一起提交的其它参数
autoSubmit: true,//选中文件后是否就提交
responseType: false,//返回的相应格式,如果是text格式的,会在响应前后加上一个<pre></pre>标签
hoverClass: 'hover',
disabledClass: 'disabled',
onChange: function(file, extension){//在选中了文件的时候触发
},
onSubmit: function(file, extension){//在提交的时候触发
},
onComplete: function(file, response){//上传结束的时候触发
}
}
你可以使用非自动提交的方式上传文件。
代码示例如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ajaxupload =new AjaxUpload($("#uploadFile_button"),{
action: "upload.action",
type:"POST",
data:{},
autoSubmit:false,
responseType:"json",
name:'file',
onChange: function(file, ext){
if(ext && (/^(xls)$/.test(ext) )){
alert("只支持xls格式的文件");
}
},
onComplete: function(file, resp){
alert("上传成功");
}
});
以上代码绑定了id=uploadFile_button的html元素,只要点击它,就会弹出选择文件的对话框。
当选中了文件,你就可以手动触发它上传文件,当然你也可以在正式提交前设置一些参数。
1
2
ajaxupload.setData({id,"1"});
ajaxupload.submit();
注意:当在chrome浏览器下面,该插件存在一个bug就是重复选择相同的文件,onChange方法不会触发多次,
ajaxupload.js只适合简单的文件上传的场景,并没有显示速度的功能,也无法显示进度。
虽然该插件已经很久不再更新,但是使用简单,也有一些人一直在用。
如果你需要更强大的上传功能,ajaxupload.js可能不太适合你。
- <span style="font-family:宋体;">// Servlet</span>
- package com.my.servlet;
- import java.io.File;
- import java.io.IOException;
- import java.io.PrintWriter;
- import java.util.List;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import org.apache.commons.fileupload.FileItem;
- import org.apache.commons.fileupload.FileUploadException;
- import org.apache.commons.fileupload.disk.DiskFileItemFactory;
- import org.apache.commons.fileupload.servlet.ServletFileUpload;
- /**
- * Servlet implementation class FileUploadServlet
- */
- public class FileUploadServlet extends HttpServlet {
- private static final long serialVersionUID = 1L;
- /**
- * @see HttpServlet#HttpServlet()
- */
- public FileUploadServlet() {
- super();
- // TODO Auto-generated constructor stub
- }
- /**
- * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- doPost(request, response);
- }
- /**
- * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
- */
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- response.setContentType("text/html;charset=utf-8");
- PrintWriter out= response.getWriter();
- //得到上传文件的路径
- String savePath = this.getServletContext().getRealPath("/img");
- DiskFileItemFactory dfif = new DiskFileItemFactory();
- ServletFileUpload sfu = new ServletFileUpload(dfif);
- String newFileName="";
- try {
- List<FileItem> list =sfu.parseRequest(request);
- for(FileItem file :list ){
- if(file.isFormField()){
- System.out.println(file.getFieldName()+" "+file.getString());
- }else{
- //得到上传文件的名称
- String filename = file.getName();
- //取得后缀
- String ext =filename.substring(filename.lastIndexOf("."));
- //System.out.println(ext);
- newFileName = System.currentTimeMillis()+ext;
- //得到保存的全名
- savePath = savePath+File.separator+newFileName;
- try {
- file.write(new File(savePath));
- } catch (Exception e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- }
- }
- } catch (FileUploadException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- out.print("{'newfileName':'"+newFileName+"'}");
- }
- }
- <%@ 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-3.1.0.min.js"></script>
- <script type="text/javascript" src="JS/ajaxupload.3.6.js"></script>
- <script type="text/javascript">
- $(function(){
- //alert(111);
- var ajax = new AjaxUpload($("#uploadBtn"),{
- action:"FileUploadServlet",
- type:"POST",
- data:{"myname":"mytest"},
- autoSubmit:false,
- responseType:"json",
- /* name:'myfile', */
- onChange: function(file, ext){
- if(!(ext && /^(jpg|gif|bmp)$/.test(ext))){
- alert("只支持jpg | bmp| gif");
- return false;
- }else{
- ajax.submit();
- }
- },
- onComplete: function(file, data){
- // alert(response.test);
- $("#show").html("<img src='img/"+data.newfileName+"' style='width:200px;height:200px;'/>");
- }
- });
- });
- </script>
- </head>
- <body>
- <div id="show" ></div>
- <button id="uploadBtn">上传</button>
- </body>
- </html>
- 使用Ajaxupload.js上传文件
- 使用Ajaxupload.js上传文件
- 使用Ajaxupload.js上传文件
- 使用Ajaxupload.js上传文件
- AjaxUpLoad.js使用实现文件上传
- AjaxUpLoad.js使用实现文件上传
- AjaxUpLoad.js文件上传插件的使用
- 关于ajaxupload.js实现文件上传内容
- AjaxUpload上传文件
- 使用ajaxupload.js插件上传图片不成功问题----RTFSC
- 文件上传二之ajaxupload
- AJAX上传图片,使用ajaxupload
- jquery插件ajaxupload实现文件上传操作
- 基于ajaxupload的多文件上传
- 基于jquery的上传文件插件ajaxUpload
- 如何使用ajaxUpload方式实现异步上传
- query AjaxUpload实现多文件上传功能代码实例教程
- Jquery AjaxUpload实现文件上传功能代码实例教程
- java多线程实现售票
- 知识图谱的应用
- 《参与感》读书笔记
- JAVA DES加密解密
- Effective C++ 学习笔记(十五)
- 使用Ajaxupload.js上传文件
- python实现cifar10数据集的可视化
- Static or dynamic lib in vs
- 面试题
- 135. Candy
- PAT(basic level) 1027 打印沙漏(20)
- C语言练习——高精度小数
- MySQL改变列顺序
- PAT--1096. Consecutive Factors