jquery jQuery-File-Upload 例子

网上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的显示。

时间: 2024-11-05 22:39:45

jquery jQuery-File-Upload 例子的相关文章

jQuery File Upload文件上传插件使用

jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端.官网链接:https://github.com/blueimp/jQuery-File-Upload/wiki 特点:拖放支持:上传进度条:图像预览:可定制和可扩展的:兼容任何服务器端应用平台(PHP, Python, Ruby on Rails, Java, Node.js, Go etc.). 使用方法: 1

jquery file upload 文件上传插件

1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jquery file upload 下载 地址:https://github.com/blueimp/jQuery-File-Upload/tags jquery file upload API 地址:https://github.com/blueimp/jQuery-File-Upload/wiki

jQuery File Upload

jQuery File Upload 需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址

jQuery File Upload 单页面多实例的实现

jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload 是一个 jQuery 图片上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示.插件基于开放的标准,如 HTML5 和 JavaScript ,不需要额外的浏览器插件(例如使用Adobe 的 Flash ),在旧版浏览器中使用 XMLHttpRequest

jquery File upload使用总结

1. jquery file upload 下载 jquery file upload Demo 地址:https://blueimp.github.io/jQuery-File-Upload/ jquery file upload 下载   地址:https://github.com/blueimp/jQuery-File-Upload/tags jquery file upload API    地址:https://github.com/blueimp/jQuery-File-Upload

jQuery File Upload 图片上传解决方案兼容IE6+

1.下载:https://github.com/blueimp/jQuery-File-Upload 2.命令: npm install bower install ====================== 3.修改basic.html 如下: 1.cdn 静态引用修改 2.ajax提交路径修改 ====&&& 其他demo页面修改同理 =======: 下面修改完了以后.如下所示: <!DOCTYPE HTML><!--/* * jQuery File Up

jQuery File Upload跨域上传

最近在做一个一手粮互联网项目,方案为前后端分离,自己负责前端框架,采用了Requirejs+avalonjs+jquery三个框架完成. 前后端通过跨域实现接口调用,中间也发现了不少问题,尤其是在富文本编辑器和上传插件跨域的处理过程中,费劲了脑汁,总算解决了. 上传选择了jQuery File Upload,兼容性还是相对不错,并且支持跨域,但是没有一个完整的跨域Demo,只能看源码找帮助. 下载地址:https://github.com/blueimp/jQuery-File-Upload 页

用jQuery File Upload做的上传控件demo,支持同页面多个上传按钮

需求 有这么一个需求,一个form有多个文件要上传,但又不是传统的图片批量上传那种,是类似下图这种需求,一开始是用的swfupload做的上传,但是问题是如果有多个按钮的话,就要写很多重复的代码,于为了代码的简洁所以就开始寻求其他的方法,期间试过uploadify,但是由于样式始终调不出来,最后就放弃了,直到发现这么个小巧的玩意,jQuery File Upload. 本文包含了upload的js实现,html的分析,css的实现等内容,文章末尾有git地址 最简运行时 官网下载的demo有N多

jquery file upload 后台收到的文件名中文乱码, filename中文乱码

本周用jquery file upload做上传文件的功能,后台会接受文件,并且截取文件名作为字符存入数据库.基本功能实现时候,试了几个文件,发现如果文件名如果没有中文就OK,如果文件名带中文的话,后台收到的就是中文乱码,怎么去解码都没用. 例如,上传的文件叫做"昕锐配置表.xls",但是到后台收到的却是 "鏄曢攼閰嶇疆琛?xls" ,如下图: 似乎也不是解码能解决的问题. 于是乎想弄清楚这个文件名是在哪个环节出问题的.首先写了一个最简单的html页面,里面就是最原

Spring-boot之jQuery File Upload后台配置方法

文件上传在Spring-boot中本身配置起来非常简单,但是有个多文件传递和单个传递的问题. 两者配置是略有不同的,而且还有一些让我这个技术小白很容易踩坑的地方. 重要的几点: 上传的是单个文件:  MultipartFile file 上传的是多个文件: MultipartFile[] file 先从单个文件上传 后台配置来说: public Map uploadFile(@RequestParam("file") MultipartFile file,HttpServletRequ