Heim > php教程 > php手册 > PHP+jQuery+Ajax多图片上传

PHP+jQuery+Ajax多图片上传

WBOY
Freigeben: 2016-06-07 11:39:07
Original
1294 Leute haben es durchsucht

今天介绍大家一款多图片上传插件: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>"); <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元

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage