ajaxFileUpload 异步上传数据
AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。
它的配置方式比较像jQuery的AJAX,使用比较方便
语法:$.ajaxFileUpload([options])
参数:
1,url 上传处理程序地址。
2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID。
3,secureuri 是否启用安全提交,默认为false。
4,dataType 服务器返回的数据类型。可以为xml,script,json,html。如果不填写,jQuery会自动判断。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。
6,error 提交失败自动执行的处理函数。
7,data 自定义参数。这个东西比较有用,当有数据是与上传的图片相关的时候,这个东西就要用到了。
8, type 当要提交自定义参数时,这个参数要设置成post
使用步骤:
第一步:导入JQuery和ajaxFileUpload的js文件
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
第二步:HTML代码
<div style="width:200px;">
<p><img id="img" src="" alt="头像"/></p>
<p><input type="file" id="file" name="file" onchange="imgPreview();"/></p>
<p>账户:<input type="text" id="username"/></p>
<p>密码:<input type="password" id="password"/></p>
<p><input type="button" value="注册" onclick="register();"/></p>
</div>
第三步:JS代码
/*
用户—注册
*/
function register(){
//获取账户
var username = $('#username').val().trim();
if(username==null || username==''){
alert('账户为空!');
return false;
}
//获取密码
var password = $('#password').val().trim();
if(password==null || password==''){
alert('密码为空!');
return false;
}
//获取文件
var file = $('#file')[0].files[0];
if(!file){
alert('请上传头像文件!');
return false;
} $.ajaxFileUpload({
"url": 'register.do',
"secureuri": false,
"fileElementId": "file",
"data": {"username":username,"password":password},
"dataType": "text",
"success": function(result){
alert('注册成功!');
},
"error": function(result){
alert('注册失败!');
}
});
}
第四步:后端java处理(spring)
在使用MultipartHttpServletReuqest和MultipartFile类时,要对spring进行配置。
具体见:http://www.cnblogs.com/gangbalei/p/6077791.html
@RequestMapping(value="/register.do")
public void upload(HttpServletRequest request) throws IOException{
//获取ajaxFileUpload上传时data中传递的数据
String username = request.getParameter("username");
String password = request.getParameter("password"); // 判断request是否属于MultipartHttpServletRequest对象
// if(request instanceof MultipartHttpServletRequest){
// MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
// MultipartFile mfile = multipartRequest.getFile("file");
// } //将request强转成MultipartHttpServletRequest对象
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest)request;
//获取上传的文件
MultipartFile mfile = multipartRequest.getFile("file"); //设置文件存放的位置
File dir = new File("F:/upload");
//如果目录不存在,则创建一个该目录
if(!dir.exists()){
dir.mkdir();
}
//获取上传的文件名
String fileName = mfile.getOriginalFilename();
//获取请求的输入流
InputStream in = mfile.getInputStream();
//读取输入流的数据
byte[] buf = new byte[1048576];
int length = in.read(buf);
//文件存放的完成路径
String path = dir.getAbsolutePath()+"//"+fileName;
//新建输出流
FileOutputStream out = new FileOutputStream(path);
//将数据写入输出流中
out.write(buf, 0, length);
//关闭输入输出流
in.close();
out.close();
}
注意:
使用ajaxFileUpload上传文件时,有时需要带参数提交,网上有很多资料说使用data,但其实要使用data带参数是需要修改的,否则后台是获取不到的.
ajaxFileUpload为了实现无刷新异步提交文件,构建 iframe 然后创建form表单 再将要上传的文件写上去再提交.但是原代码 却没有处理data.所以这块内容需要我们自己加上去.
下面红色部分为修改ajaxFileUpload.js的三处地方:
createUploadForm: function(id, fileElementId,data)
{
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
if (data) {
for (var i in data) {
$('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
}
}
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},
在ajaxFileUpload: function(s)的内容中
var form = jQuery.createUploadForm(id, s.fileElementId,s.data);
ajaxFileUpload 异步上传数据的更多相关文章
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- JQuery插件ajaxFileUpload 异步上传文件(PHP版)
太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...
- jQuery插件之ajaxFileUpload异步上传
介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- jquery之ajaxfileupload异步上传插件
点我下载工程代码由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用Jquery Ajax File Uploader这个组件下载地址:http://www.phpletter.com/d ...
- 【文件上传】jquery之ajaxfileupload异步上传插件
来自:http://www.blogjava.net/sxyx2008/archive/2010/11/02/336826.html 由于项目需求,在处理文件上传时需要使用到文件的异步上传.这里使用J ...
- jquery ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...
- JQuery插件ajaxFileUpload 异步上传文件
一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...
- asp.net mvc 使用uploadfiles 实现异步上传数据
lesg.cn 文章发布在: http://www.lesg.cn/netdaima/net/2017-990.html 在实际开发过程中, 为了提高用户的体验,在上传文件的时候通常会使用异步上传文 ...
随机推荐
- oracle ebs应用产品安全性-交叉验证规则
转自: http://blog.itpub.net/298600/viewspace-625138/ 定义: Oracle键弹性域可以根据自定义键弹性域时所定义的规则,执行段值组合的自动交叉验证.使用 ...
- leetcode-【中等题】5. Longest Palindromic Substring
题目 Given a string S, find the longest palindromic substring in S. You may assume that the maximum le ...
- Linux压缩打包命令
tar命令 [root@linux ~]# tar [-cxtzjvfpPN] 文件与目录 .... 参数 -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参数 ...
- Linux 文件与目录管理
Linux 文件与目录管理 我们知道Linux的目录结构为树状结构,最顶级的目录为根目录 /. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 在开始本教程前我们需要先知道什么是绝对 ...
- Apache日志分析
Apache日志统计举例 加些来了解一下如何统计Apache的访问日志,一般可以用tail命令来实时查看日志文件变化,但是各种的应用系统中的日志会非常复杂,一堆长度超过你浏览极限的日志出现在你眼前时, ...
- 在SQL SERVER中根据某字段分隔符将记录分成多条记录
XT_RSGL_KQSZ_LS表结构如下图: CREATE TABLE XT_RSGL_KQSZ_LS( KQFW VARCHAR(400) ) 其中KQFW字段以分割符 , 隔开 INSERT I ...
- IDL数组计算
函数 作用 min 最小值 max 最大值 total 求和 stddev 标准差 mean 平均值
- UDP发送和接收
发送函数 public bool udpSend(string ip, int port, byte[] data) { Socket socket = new Socket(AddressFamil ...
- delphi Style TBitmapLink
New Bitmap Links Editor http://docwiki.appmethod.com/appmethod/1.17/topics/en/What's_New A new edito ...
- Spark学习笔记之SparkRDD
Spark学习笔记之SparkRDD 一. 基本概念 RDD(resilient distributed datasets)弹性分布式数据集. 来自于两方面 ① 内存集合和外部存储系统 ② ...