PHP+jQuery+Ajax多图片上传

今天介绍大家一款多图片上传插件：plupload，通过PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。
若是想看详细教程 http://www.sucaihuo.com/js/3.html，还有演示DEMO，最主要是可以免费下载。var uploader = new plupload.Uploader({ //创建实例的构造方法 <br>     runtimes: 'html5,flash,silverlight,html4', <br>     //上传插件初始化选用那种方式的优先级顺序 <br>     browse_button: 'btn', <br>     // 上传按钮 <br>     url: "ajax.php", <br>     //远程上传地址 <br>     flash_swf_url: 'plupload/Moxie.swf', <br>     //flash文件地址 <br>     silverlight_xap_url: 'plupload/Moxie.xap', <br>     //silverlight文件地址 <br>     filters: { <br>         max_file_size: '500kb', <br>         //最大上传文件大小（格式100b, 10kb, 10mb, 1gb） <br>         mime_types: [ //允许文件上传类型 <br>         { <br>             title: "files", <br>             extensions: "jpg,png,gif" <br>         }] <br>     }, <br>     multi_selection: true, <br>     //true:ctrl多文件上传, false 单文件上传 <br>     init: { <br>         FilesAdded: function(up, files) { //文件上传前 <br>             if ($("#ul_pics").children("li").length > 30) { <br>                 alert("您上传的图片太多了！"); <br>                 uploader.destroy(); <br>             } else { <br>                 var li = ''; <br>                 plupload.each(files, <br>                 function(file) { //遍历文件 <br>                     li += "<li><div> <span></span><span>0%</span> </div></li>"; <br>                 }); <br>                 $("#ul_pics").append(li); <br>                 uploader.start(); <br>             } <br>         }, <br>         UploadProgress: function(up, file) { //上传中，显示进度条 <br>             $("#" + file.id).find('.bar').css({ <br>                 "width": file.percent + "%" <br>             }).find(".percent").text(file.percent + "%"); <br>         }, <br>         FileUploaded: function(up, file, info) { //文件上传成功的时候触发 <br>             var data = JSON.parse(info.response); <br>             $("#" + file.id).html("<div><img alt="PHP+jQuery+Ajax多图片上传" ></div> <p>" + data.name + "</p> <div class="aritcle_card"> <a class="aritcle_card_img" href="/ai/1177"> <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b7afe4428cd913.png" alt="REimagine Home: AI"> </a> <div class="aritcle_card_info"> <a href="/ai/1177">REimagine Home: AI</a> <p>上传室内图片，AI自动为你生成多种家居软装效果图</p> <div class=""> <img src="/static/images/card_xiazai.png" alt="REimagine Home: AI"> <span>61</span> </div> </div> <a href="/ai/1177" class="aritcle_card_btn"> <span>查看详情</span> <img src="/static/images/cardxiayige-3.png" alt="REimagine Home: AI"> </a> </div> "); <br>         }, <br>         Error: function(up, err) { //上传出错的时候触发 <br>             alert(err.message); <br>         } <br>     } <br> }); <br> uploader.init();更多精品jQuery特效：http://www.sucaihuo.com/js。高手可以欣赏，新手可以学习^_^

PHP+jQuery+Ajax多图片上传.zip ( 423.47 KB 下载：364 次 )

AD：真正免费，域名+虚机+企业邮箱=0元