网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考。
下面介绍 用插件实现图片异步上传的代码。
1 比要的js一个都不能少,他们之间是有依赖关系的。
jquery-1.8.2.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.fileupload.js
jquery.iframe-transport.js
jquery.fileupload-process.js
jquery.fileupload-validate.js
(最后2个js是有依赖的,缺少的话acceptFileTypes,maxFileSize 不会进行验证)
2 贴代码:
<script>
$(function () {
uploadImageAjaxDelete = function (url,obj){
$.ajax({url:url,async:false,dataType:"text",success:function(data){
if(data=='1'){
//如果删除成功,恢复file的使用,同时是图片渐变消失
$(obj).parent().children("input[type='file']").removeAttr("disabled");
$(obj).parent().children("img").fadeOut("slow",function(){
$(this).add($(obj).parent().children("a")).add($(obj).parent().children("input:hidden")).add($(obj).parent().children("br")).remove();
});
}else{
alert('图片删除失败!');
}
}});
}
$("input[type='file']").fileupload({
url: 'image_ajax_save.action',
dataType: 'json',
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 2097152// 2 MB
}).on('fileuploadadd', function (e, data) {
$(this).parent().children("label").remove();
$("<p class='uploadImgLoad'>上传中... 0%</p>").appendTo($(this).parent());
$(this).attr("disabled",true);
}).on('fileuploadprocessalways', function (e, data) {
if(data.files.error){
$(this).parent().children("p").remove();
$(this).removeAttr("disabled");
if(data.files[0].error=='acceptFileTypes'){
$(this).parent().append("<label class='error'>图片类型错误</label>");
}
if(data.files[0].error=='maxFileSize'){
$(this).parent().append("<label class='error'>图片不能大于2M</label>");
}
}
}).on('fileuploadprogressall', function (e, data) {
var $p = $(this).parent().children("p");
var progress = parseInt(data.loaded / data.total * 100, 10);
if($p.length==0){
$("<p class='uploadImgLoad'>上传中... "+progress+"%</p>").appendTo($(this).parent());
}else{
console.info(progress);
$p.text('上传中... '+progress+'%');
if(progress==100){
$p.fadeOut("slow",function(){
$(this).remove();
});
}
}
}).on('fileuploaddone', function (e, data) {
if(data.result.result=='error'){
$(this).removeAttr("disabled");
alert('抱歉,上传过快,请稍等!');
}else if(data.result.result=='success'){
$(this).parent().prepend($("<a href='#' > 删除</a>").attr("onclick","uploadImageAjaxDelete('image_ajax_delete.action?dbFileName="+data.result.dbFileName+"',this)").add("<br/>"))
.prepend($("<img width='140' height='90' border='0' />").attr("src",data.result.url))
.prepend($("<input type='hidden' name="+data.result.hiddenName+" id="+data.result.hiddenName+" value='"+data.result.dbFileName+"' />"));
}
});
});
</script>
3效果:见附件图片。
4 注意:操作的时候一定查看:API,Demo
https://github.com/blueimp/jQuery-File-Upload/wiki/API
http://blueimp.github.io/jQuery-File-Upload/basic.html
此外 fireFox 的 debug插件配合使用,有脚本输出的断点功能,以及console.info的显示。
在使用中如有问题,请给我留言,共同探讨..进步。
- 大小: 2.2 KB
- 大小: 29.8 KB
分享到:
相关推荐
下载jQuery-File-Upload-master压缩包,解压后在项目中引入所需的CSS、JS文件,以及jQuery库。 3.2 初始化 通过JavaScript代码初始化jQuery-File-Upload,设置相关参数,例如: ```javascript $('#fileupload')....
在上传过程中,会触发一系列的事件,如fileuploadstart、fileuploadprogress、fileuploadsuccess等,开发者可以绑定这些事件来执行相应的逻辑。 三、集成与配置 要将jQuery-File-Upload引入项目,首先需要在HTML中...
《jQuery-File-Upload-9.12.1:便捷高效文件上传插件解析》 在Web开发领域,用户交互的丰富性和效率是提升用户体验的关键因素之一,而文件上传功能正是其中不可或缺的一部分。jQuery-File-Upload是一款广受欢迎的...
这篇名为“AngularJS封装jQuery-File-Upload”的博文主要探讨了如何将jQuery-File-Upload的功能整合到AngularJS的应用中,以便充分利用AngularJS的数据双向绑定和模块化特性,同时保持jQuery-File-Upload的强大功能...
《jQuery-file-upload:实现跨语言的拖拽上传文件功能》 在现代Web开发中,用户交互体验至关重要,其中文件上传是常见的功能之一。jQuery-file-upload是一个强大的jQuery插件,它支持多语言、拖拽上传等多种特性,...
《jQuery-File-Upload在ASP.NET MVC中的应用详解》 在Web开发中,文件上传功能是必不可少的一部分,尤其是在用户需要提交图片、文档等文件时。jQuery-File-Upload是一款广泛使用的前端文件上传插件,它提供了优雅的...
jQuery-File-Upload-9.11.2(完整版,插件已下载),官方的很多引用文件都是线上的,加载很慢,下载到本地后更靠谱,这个版本是已经整理好的,直接调用后台php的部分也在其中,可以直接应用到项目中,直接拷贝过去就...
《jQuery File Upload实战详解》 在当今的Web开发中,用户界面往往需要处理文件上传功能,这使得jQuery File Upload插件成为一个重要的工具。本篇文章将深入探讨如何利用jQuery File Upload库,结合Java后端,实现...
在使用jQuery File Upload时,你需要将下载的`jQuery-File-Upload-master`压缩包解压,并引入必要的JavaScript和CSS文件到你的项目中。这个压缩包通常包含以下内容: 1. `js`目录:存放核心的JavaScript文件,如`...
《jQuery File Upload详解》 在Web开发中,文件上传功能是一项常见的需求,而jQuery File Upload则是实现这一功能的一款强大插件。本篇文章将深入探讨jQuery File Upload的核心特性、工作原理以及如何在实际项目中...
在本文中,我们将深入探讨如何使用jQuery-File-Upload插件在ASP.NET MVC框架下实现Excel文件的上传功能。这个过程涉及到前端HTML交互、JavaScript处理以及C#后端的控制器和模型验证。以下是对整个流程的详细解释: ...
《jQuery File Upload 9.9.2:一款强大的文件上传插件》 在现代Web开发中,文件上传功能是不可或缺的一部分。jQuery File Upload 9.9.2是一款优秀的JavaScript插件,它为开发者提供了高效、易用且功能丰富的文件...
支持上传多个文档Ajax 开发实例, Chrome上传多个没问题,但IE上传会出现错误 序列化类型为“System.Collections.Generic.LinkedListNode`1[[ViewDataUploadFilesResult, App_Web_5x24fddx, Version=0.0.0.0, ...
而"jQuery-File-Upload-10.32.0"目录可能包含了所有必要的JavaScript、CSS、图像和其他资源文件,这些文件需要被正确引用到你的项目中以实现文件上传功能。 对于那些正在做毕业设计或计算机案例研究的人来说,这个...
**jQuery-File-Upload** 是一个广泛使用的前端文件上传插件,它提供了丰富的功能和优秀的用户体验。这个插件是基于JavaScript库jQuery构建的,旨在简化文件上传操作,尤其是在需要批量上传、进度显示以及跨域上传的...
这个名为 "jQuery-File-Upload-Java-master.zip_file jquery ja_jQuery File Up" 的压缩包中包含了使用Java实现jQuery File Upload的实例代码,对于开发者来说是一份宝贵的参考资料。 首先,我们来了解jQuery File ...
"blueimp-jQuery-File-Upload"是一款强大的、基于jQuery的文件上传组件,其最新版本为9.10.1,即"blueimp-jQuery-File-Upload-9.10.1-0-gc9d8bc7.zip"。这个开源项目以其丰富的特性、灵活的配置以及优秀的用户体验,...