jQuery插件之ajaxFileUpload [TOC] ## 一、插件介绍 最近在工作中使用了Jquery的ajaxFileUpload的图片上传插件，感觉这种异步上传的方式非常好用接下来就介绍一下这个插件的使用。 通过查看插件的源码发现，插件的实现原理大概就是创建一个隐藏的表单和iframe然后用JS去提交，获得返回值。 ## 二、插件使用 ### 1、引用文件 先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。 ~~~ <script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script> <script src="__ADMIN__/js/ajaxfileupload.js"></script> ~~~ ### 2、HTML代码 ~~~ <div class="form-group"> <label class="col-sm-2 control-label">缩略图</label> <div class="col-sm-8"> <div id="file-pretty"> <div> <input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value=""> <div class="input-append input-group"> <span class="input-group-btn"> <button id="btn_thumb" class="btn btn-white" type="button">选择图片</button> </span> <input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}"> </div> </div> </div> </div> <div class="col-sm-2"><img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt=""></div> </div> ~~~ ### 3、JS代码 ~~~ <script type="text/javascript"> $(function(){ $("#btn_thumb").click(function(){ $("#file_thumb").click(); }); //异步上传 $("body").delegate('#file_thumb', 'change', function(){ var filepath = $("input[name='thumb']").val(); var arr = filepath.split('.'); var ext = arr[arr.length-1]; //alert(filepath);exit(); if('gif|jpg|png|bmp'.indexOf(ext)>=0){ $.ajaxFileUpload({ url: '/admin/slide/upload_image', secureurl: false, fileElementId: 'file_thumb', //file标签ID dataType: 'json', //返回数据类型 data:{name:'thumb'}, success:function (data,status){ $("#info_thumb").val(data); $("#show_thumb").attr('src','/uploads/images/'+data); $("#info_thumb").focus(); }, complete:function (XMLHttpRequest){ }, error:function (data,status,e){ layer.alert('上传失败!'); }, }); } else { //清空file $("#file_thumb").val(""); layer.alert('请上传合适的图片类型!'); } }); }); </script> ~~~ ### 4、后台处理（PHP） ~~~ //单文件（包含单文件）异步上传 public function upload_image(){ //图片上传 $file = request()->file(input('name')); $info = $file->move(ROOT_PATH . 'public/uploads/images'); if($info) { return json_encode($info->getSaveName()); } } ~~~ ### 5、前台调用 ~~~ <div id="slideshow"> <ul class="rslides" id="slider"> {volist name="data" id="vo"} <li><a href="{$vo.url}" rel="bookmark" target="_blank"> <img src="__UPLOADS__/images/{$vo.img}" max-width="" max-height="" alt="{$vo.title}"></a> <p class="slider-caption">{$vo.title}</p> </li> {/volist} </ul> </div> ~~~ ## 三、网址参考 jQuery插件之ajaxFileUpload https://www.cnblogs.com/labimeilexin/p/6742647.html ajaxFileUpload上传文件简单示例 https://www.cnblogs.com/eleven258/p/8126297.html JQuery的ajaxFileUpload的使用 https://www.cnblogs.com/zhanghaoliang/p/6513964.html 文件上传----jQuery插件之ajaxFileUpload https://blog.csdn.net/llxinlan/article/details/79047006 jQuery插件之ajaxFileUpload异步上传 https://www.cnblogs.com/wkrbky/p/6228779.html