- 浏览: 518922 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (299)
- Oracle(pl/sql_Erp_Pro*C) (69)
- 设计模式 (4)
- spring (23)
- ext (17)
- apache开源项目应用 (4)
- jquery (16)
- 生活琐事 (8)
- 下载资源 (23)
- mysql (2)
- Eclipse使用积累 (5)
- 报表类(报表/图表) (13)
- php (4)
- Web多彩文本框 (3)
- json (4)
- jqgrid (2)
- ant (2)
- java算法积累 (8)
- EL表达式/JSTL (4)
- poi (3)
- gwt (2)
- 爬网第一步 (2)
- javascript (17)
- Javaweb (8)
- tomcat (1)
- flex (1)
- Java&DB (3)
- J2SE (7)
- linux (3)
- 数据结构 (1)
- dot net (5)
- struts (1)
- ibatis (1)
- log4j (1)
- 项目管理 (1)
- Java native interface(jni,jacob......) (5)
- applet (1)
- VB.net/C#.net/JNI (20)
- css (1)
- Sqlite (1)
- servlet (1)
- REST (1)
最新评论
-
wenhurena:
能不能给一下解压密码roki.work.2017@gmail. ...
Ebs解体新書と学習資料1 -
liutao1600:
楼主写的太好了,每天学习~~
Spring_MVC(6)测试 -
liutao1600:
太好了,每天学习你的文章~~~
Spring_MVC(3)表单页面处理 -
liutao1600:
学习了,太好了
Spring_MVC(2)控制层处理 -
liutao1600:
学习了~~~
Spring_MVC(1)构建简单web应用
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");// 获得文件
- ajaxupload高级.zip (8 KB)
- 下载次数: 615
- ajaxupload入门.zip (6.7 KB)
- 下载次数: 502
发表评论
文章已被作者锁定,不允许评论。
-
jqgird
2011-05-31 23:06 1517http://a3mao.javaeye.com 上 ... -
jquery好站
2010-11-05 20:05 902http://www.ndoherty.biz/ -
jsTree
2010-09-08 23:47 5250一、JStree的简单介绍 1.关于jstree jsTree ... -
jstree
2010-09-08 09:22 1396jstree 主页 : http://www.jstree.c ... -
JS 动态树 异步加载树 xloadtree WebFXLoadTree
2010-09-06 22:24 2311资料地址: http://webfx.eae.net/dht ... -
dtree demo example
2010-09-01 00:41 1934<html> <head> ... -
dtree 用法
2010-09-01 00:03 1434解压缩dtree.zip 包。 dtree目录下包括这些文件 ... -
dhtmlxtree demo
2010-08-31 23:56 950实例 -
Jquery学习
2010-08-04 14:06 924demo-1 ======页面加载完成后。执行alert(' ... -
jquery ui datepicker使用和下载地址
2010-07-21 12:32 4452先堆几个地址: JQuery官方地址:http://jq ... -
jquery ui datepicker使用
2010-07-21 10:13 3753在Web开发中,总会遇 ... -
jquery日历控件
2010-07-21 09:57 6603Jquery日历控件合集 FullCale ... -
jquery实现图片左右滚动类似京东
2010-05-19 08:19 1305附件 -
jquery实现图片左右滚动类似京东
2010-05-17 23:26 3113类似京东图片嗷嗷转! -
dhtmlxTree
2010-05-17 08:19 794html树形菜单
相关推荐
总结,jQuery插件AjaxUpload为Web开发者提供了一种高效、便捷的文件上传解决方案,它结合了jQuery的简洁API和异步文件上传的优势,帮助我们构建更富交互性的Web应用。通过理解和应用这些基础知识,你可以在实际项目...
AjaxUpload是jQuery的一个插件,它提供了一种方便的异步文件上传方式,无需刷新页面即可完成文件上传,提高了用户体验。在这个“Jquery AjaxUpload实现文件上传实例 PHP版”中,我们将探讨如何使用jQuery的Ajax...
ajaxupload.js 是一款使用jquery上传文件的js插件,对于简单的文件上传,足够可以应付, 你可以根据自身需要对前后端代码进行补充,也可以将一些...总的来说Jquery插件AjaxUpload实现文件上传功能的应用还是比较容易的。
**jQuery Upload AJAX方式详解** 在Web开发中,文件上传是一个常见的功能,传统的文件上传通常需要刷新整个页面,用户体验较差。随着Ajax技术的发展,无刷新上传文件成为可能,jQuery结合Ajax提供了一种优雅的解决...
在IT行业中,前端开发经常需要处理用户上传图片的需求,而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题,就是一种高效且用户体验优秀的解决方案。接下来,我们将深入探讨这些技术及其整合...
AjaxUpload是一种在Web应用中实现异步文件上传的技术,它基于JavaScript的Ajax(Asynchronous JavaScript and XML)技术,允许用户在不刷新整个页面的情况下上传文件,提高了用户体验。`ajaxupload.js`是实现这一...
总结来说,`jQuery ajax file upload`是通过`ajaxFileUpload`插件实现的一种无刷新的文件上传方式,它提高了用户体验,并且提供了丰富的自定义选项和回调机制,适用于各种Web应用的文件上传需求。要正确使用,需要...
标题"ajaxUpload."和描述"ajaxUpload.ajaxUpload.ajaxUpload."暗示我们将深入探讨这个话题。 ### 一、Ajax Upload原理 Ajax Upload的核心是利用JavaScript的异步特性,通过XMLHttpRequest对象与服务器进行通信。它...
《使用jQuery.upload.js实现上传功能详解》 在Web开发中,文件上传是一个常见的需求,而jQuery.upload.js是一款基于jQuery的轻量级插件,它极大地简化了文件上传的实现过程,使得开发者能够快速构建功能丰富的文件...
《基于jQuery的文件上传插件JQuery.upload详解》 在Web开发中,文件上传功能是不可或缺的一部分,尤其在用户交互...无论是在个人项目还是企业级应用中,JQuery.upload都能以其实用性和易用性成为开发者的得力助手。
jQuery File Upload是一款功能强大的文件上传插件,专为前端开发者设计,用于在Web应用程序中实现高效、用户友好的多文件上传功能。这个插件的版本是v10.32.0,它提供了丰富的特性,使得文件上传变得更加简单且可控...
在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理和Ajax交互等任务。`jQuery AJAX`是jQuery库中的一个核心功能,它极大地简化了原生JavaScript的异步数据通信过程。本教程将深入探讨...
jQuery File Upload利用HTML5的File API,通过AJAX方式实现文件的分块上传,以应对大文件上传时的性能问题。同时,它使用FormData对象存储文件数据,通过XMLHttpRequest的send方法发送到服务器。在上传过程中,插件...
2. **jQuery和AjaxUpload插件**:引入jQuery库和AjaxUpload插件的JavaScript文件,然后编写JavaScript代码来绑定事件和处理上传。 ```javascript $(document).ready(function() { var options = { url: 'upload....
ASP.NET与jQuery结合Flash实现的多文件上传技术是一种在Web应用程序中处理大量文件上传的高效方法。这种技术允许用户一次性选择多个文件进行上传,并且在上传过程中提供了可视化的进度条反馈,增强了用户体验。 ...
综上所述,AjaxUpload是现代Web应用中实现高效、流畅文件上传的一种重要技术,结合JavaScript和Ajax,它能提供更好的用户体验。不过,随着技术的发展,HTML5的File API和Fetch API等新特性也在逐步替代传统的Ajax...
在网页应用中,图片上传功能是不可或缺的一部分,而jQuery File Upload插件则为开发者提供了一个强大且易用的解决方案。这款插件以其丰富的特性、广泛的语言支持以及优秀的用户体验设计,赢得了开发者们的青睐。本文...
【jQuery File Upload】是jQuery的一个插件,用于在网页上实现文件上传功能,它支持多文件选择、进度条显示、预览以及异步上传。在Mvc4.0框架下,结合jQuery File Upload可以构建高性能、用户体验优秀的文件上传系统...
总之,`ajaxupload.js` 和 `ajaxfileupload.js` 是两种实用的文件上传解决方案,它们可以帮助开发者创建高效、友好的文件上传功能,提高Web应用的交互性。通过熟练掌握这两个库的使用,你可以构建出符合用户期望的...