上传预览图片的插件jquery-fileupload

上传预览图片的插件jquery-fileupload

github地址:https://github.com/blueimp/jQuery-File-Upload

中文文档:http://www.jq22.com/jquery-info230

步骤

  1. 引包

	<!-- jquery ui小部件,上传插件依赖了jquery ui的小部件 -->
	<script src="js/vendor/jquery.ui.widget.js"></script>
	<!-- 如果上传图片需要跨域,那么需要引入这个js文件,如果不跨域,则不需要引入 -->
	<script src="js/jquery.iframe-transport.js"></script>
	<!-- jquery上传插件 -->
	<script src="js/jquery.fileupload.js"></script>
  1. html结构如下

	<!-- name指定图片上传时的name属性 -->
	<!-- data-url指定图片上传时的路径 -->
	<!-- multiple指定多文件上传 -->
	<input id="fileupload" type="file" name="files" data-url="server/php/" multiple>
  1. js代码

	$("#fileupload").fileupload({
	      dataType:"json",
	      //e:事件对象
	      //data:图片上传后的对象,通过e.result.picAddr可以获取上传后的图片地址
	      done:function (e, data) {
	        console.log(data);
	      }
    });

posted on 2018-01-19 11:28  ouruixi  阅读(536)  评论(0)    收藏  举报

导航