您的位置:首页 > Web前端 > JQuery

jquery Ajaxupload应用

2010-09-10 16:48 309 查看
AjaxUpload

  Jquery插件AjaxUpload实现文件上传功能时无需创建form表单,即可实现Ajax方式的文件上传,当然根据需要也可以创建form表单。

工作

1、下载Jquery开发包和文件上传插件AjaxUpload

2、创建uploadfile.html,并引入Jquery开发包和AjaxUpload插件

<script src="js/jquery-1.3.js"></script>
<script src="js/ajaxupload.3.5.js"></script>
3、根据Jquery插件AjaxUpload的需要,创建一个触发Ajax文件上传功能的DIV

<ul>
<li id="example">
<div id="upload_button">文件上传</div>
<p>已上传的文件列表:</p>
<ol class="files"></ol>
</ul>
:由下面的代码我们可以看到Jquery插件AjaxUpload是根据upload_button这个DIV触发文件上传功能。

前台JS

  在代码中我设置了开关,根据需要可以匹配上传文件类型,同时也可以设置是以Ajax方式实现单个文件上传还是多个文件上传。

$(document).ready(function(){
var button = $('#upload_button'), interval;
var fileType = "all",fileNum = "one";
new AjaxUpload(button,{
action: 'do/uploadfile.php',
/*data:{
'buttoninfo':button.text()
},*/
name: 'userfile',
onSubmit : function(file, ext){
if(fileType == "pic")
{
if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
this.setData({
'info': '文件类型为图片'
});
} else {
$('<li></li>').appendTo('#example .files').text('非图片类型文件,请重传');
return false;
}
}

button.text('文件上传中');

if(fileNum == 'one')
this.disable();

interval = window.setInterval(function(){
var text = button.text();
if (text.length < 14){
button.text(text + '.');
} else {
button.text('文件上传中');
}
}, 200);
},
onComplete: function(file, response){
if(response != "success")
alert(response);

button.text('文件上传');

window.clearInterval(interval);

this.enable();

if(response == "success");
$('<li></li>').appendTo('#example .files').text(file);
}
});

});

第1行:$(document).ready()函数,Jquery中的函数,类似于window.load,使用这个函数可在DOM载入就绪能够读取并操纵时立即调用绑定的函数。

第3行:fileType和fileNum参数代表上传文件的类型和数量,默认值为可上传所有类型文件,同一时间只能上传一个文件,如想上传图片文件或同时上传多个文件,可将这两个变量值变为pic和more。

第6~8行:POST到服务器的数据,你可以设置静态值也可以通过Jquery的DOM操作函数获得一些动态值,比如form表单中INPUT的值等。

第9行:等同于前端

<input type="file" name="userfile">
服务器端$_FILES['userfile']

第10~36行:文件上传前触发的功能。

第11~21行:图片文件类型的过滤功能,Jquery setData函数用来设置POST至服务器端的值。

第25~26行:设置同时只上传一个文件还是多个文件,如果只上传一个文件,则将触发按钮禁掉。如果要多传输几个文件,请在服务器端PHP文件上传程序中设置MAXSIZE的值,当然上传文件的大小限制同时和PHP.INI文件中的设置也有关。

第28~35行:在文件上传过程中每隔200毫秒动态更新一次按钮的文字,已实现动态提示的效果。window.setInterval函数用来每隔指定的时间就执行一次内置的函数,交互时间单位为豪秒。

第37~49行:文件上传功能完成后触发的功能,根据返回值如果服务器端报错,则前端通过ALERT方式提示出错信息。

<script>
$(document).ready(function(){

var thumb = $('img#thumb');

thumb.mouseover(function() {
thumb.css("border","2px dotted red");
});
thumb.mouseout(function() {
thumb.css("border","none");
});
thumb.click(function() {
$("span#uploadinfo").css("visibility","hidden");
$("span#uploadarea").css("visibility","visible");
});

new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'image',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
var r = JSON.parse(response);

thumb.attr('src', r.uri);
$("span#uploadinfo").text(r.message);
$("span#uploadinfo").css("visibility","visible");
$("span#uploadarea").css("visibility","hidden");
}
});
});

</script>
<table width="110" height="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" class="photo_border">
<div class="seven columns">
<div class="preview">
<img width="90" height="120" alt="点击上载图片" src="${f.pic}" id="thumb">
</div>
<span id="uploadinfo">点击图片更新个人照片</span>
<span id="uploadarea" class="wrap hotness" style="visibility:hidden">
<form action="imageUpload.do" id="newHotnessForm">
<input type="file" size="20" id="imageUpload" class=" ">
</form>
</span>
</div>
</td>
</tr>
</table>

Html代码如上,传给后台的file名为image
后台代码为:
@RequestMapping(value = { "/imageUpload.do" })
public String fmUpload(HttpServletRequest request, ModelMap model) {

String PhotoShowCardNo = null;
FileOutputStream fos = null;
String err ="";
try {
SessionUser u = (SessionUser) WebUtils.getSessionAttribute(request,
"SessionUser");
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = multipartRequest.getFile("image");// 获得文件
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: