今天介绍大家一款多图片上传插件：，通过PHP+Ajax实现多图片上传的效果。用户只需要点击选择要上传的图片，然后图片自动上传到服务器上并立即显示在页面上。
下载资源：&91&次&下载积分：&0&分
首先我们在页面上放置个上传按钮，使用POST提交到ajax.php。#ul_pics 用来显示上传完毕后的图片。关于按钮、进度条、图片垂直居中样式不加说明，请参照下载包的源码。
="btn"&id="btn"上传图片&最大500KB，支持jpg，gif，png格式。&
="ul_pics"&class="ul_pics&clearfix"</ul</a
接着，加载jQuery.js和plupload.full.min.js插件。
="text/javascript"&src="/Public/js/other/jquery.js"&
="text/javascript"&src="plupload/plupload.full.min.js"</script</script
当点击按钮“上传图片”后，弹出选择文件对话框，按 "ctrl" 选择多图片上传。然后调用 uploader.start() 方法，开始上传。上传中间过程我们可以用 UploadProgress 方法来显示文件进度，最后通过 FileUploaded 来显示对应的图片。通过浏览器控制台，会发现上传一张图片，会向后台ajax.php请求一次。
var&uploader&=&new&plupload.Uploader({&&
&&&&runtimes:&'html5,flash,silverlight,html4',&
&&&&browse_button:&'btn',&
&&&&url:&"ajax.php",&
&&&&flash_swf_url:&'plupload/Moxie.swf',&
&&&&silverlight_xap_url:&'plupload/Moxie.xap',&
&&&&filters:&{&
&&&&&&&&max_file_size:&'500kb',&
&&&&&&&&mime_types:&[&&
&&&&&&&&{&
&&&&&&&&&&&&title:&"files",&
&&&&&&&&&&&&extensions:&"jpg,png,gif"&
&&&&&&&&}]&
&&&&multi_selection:&true,&
&&&&init:&{&
&&&&&&&&FilesAdded:&function(up,&files)&{&&
&&&&&&&&&&&&if&($("#ul_pics").children("li").length&&&30)&{&
&&&&&&&&&&&&&&&&alert("您上传的图片太多了！");&
&&&&&&&&&&&&&&&&uploader.destroy();&
&&&&&&&&&&&&}&else&{&
&&&&&&&&&&&&&&&&var&li&=&'';&
&&&&&&&&&&&&&&&&plupload.each(files,&
&&&&&&&&&&&&&&&&function(file)&{&&
&&&&&&&&&&&&&&&&&&&&li&+=&"
<li&#160;id='"&+&file['id']&+&"'&
0%</li&#160;id='"";&
&&&&&&&&&&&&&&&&});&
&&&&&&&&&&&&&&&&$("#ul_pics").append(li);&
&&&&&&&&&&&&&&&&uploader.start();&
&&&&&&&&&&&&}&
&&&&&&&&},&
&&&&&&&&UploadProgress:&function(up,&file)&{&&
&&&&&&&&&&&&$("#"&+&file.id).find('.bar').css({&
&&&&&&&&&&&&&&&&"width":&file.percent&+&"%"&
&&&&&&&&&&&&}).find(".percent").text(file.percent&+&"%");&
&&&&&&&&},&
&&&&&&&&FileUploaded:&function(up,&file,&info)&{&&
&&&&&&&&&&&&var&data&=&JSON.parse(info.response);&
&&&&&&&&&&&&$("#"&+&file.id).html("
<img&#160;src='"&+&data.pic&+&"'/&
"&+&data.name&+&"
&&&&&&&&},&
&&&&&&&&Error:&function(up,&err)&{&&
&&&&&&&&&&&&alert(err.message);&
&&&&&&&&}&
uploader.init();</img&#160;src='"
ajax.php处理图片上传，并将上传好的图片保存在uploads/目录，注意该目录是否有写入权限。首先需要检测是否为POST方式提交，然后判断图片格式、图片大小是否符合要求，然后使用move_uploaded_file()上传图片，并将图片重命名为 time().rand(100,999)。
$typeArr&=&array("jpg",&"png",&"gif");//允许上传文件格式&
$path&=&"uploads/";//上传路径&
if&(isset($_POST))&{&
&&&&$name&=&$_FILES['file']['name'];&
&&&&$size&=&$_FILES['file']['size'];&
&&&&$name_tmp&=&$_FILES['file']['tmp_name'];&
&&&&if&(empty($name))&{&
&&&&&&&&echo&json_encode(array("error"=&"您还未选择图片"));&
&&&&&&&&exit;&
&&&&$type&=&strtolower(substr(strrchr($name,&'.'),&1));&//获取文件类型&
&&&&if&(!in_array($type,&$typeArr))&{&
&&&&&&&&echo&json_encode(array("error"=&"清上传jpg,png或gif类型的图片！"));&
&&&&&&&&exit;&
&&&&if&($size&&&(500&*&1024))&{&
&&&&&&&&echo&json_encode(array("error"=&"图片大小已超过500KB！"));&
&&&&&&&&exit;&
&&&&$pic_name&=&time()&.&rand(10000,&99999)&.&"."&.&$type;//图片名称&
&&&&$pic_url&=&$path&.&$pic_name;//上传后图片路径+名称&
&&&&if&(move_uploaded_file($name_tmp,&$pic_url))&{&//临时文件转移到目标文件夹&
&&&&&&&&echo&json_encode(array("error"=&"0","pic"=&$pic_url,"name"=&$pic_name));&
&&&&}&else&{&
&&&&&&&&echo&json_encode(array("error"=&"上传有误，清检查服务器配置！"));&
plupload参数设置
参数描述默认值
Browse_button触发浏览文件按钮-
Container展现上传文件列表的容器body
chunk_size当上传文件大于服务器接收端文件大小限制的时候，可以分多次请求发给服务器，如果不需要从设置中移出-
file_data_name设置上传字段的名称文件
filters选择文件扩展名的过滤器,每个过滤规则中只有title和ext两项[{title:'', extensions:''}]-
flash_swf_urlflash文件地址-
headers自定义的插入http请求的键值对-
max_file_size最大上传文件大小（格式100b, 10kb, 10mb, 1gb）-
multi_selection布尔值，是否多文件上传false
resize修改图片属性 resize: {width: 320, height: 240, quality: 90}-
runtimes上传插件初始化选用那种方式的优先级顺序，如果第一个初始化失败就走第二个，依次类推-
required_features需要那些特性，才能初始化插件-
url上传服务器地址-
unique_names是否生成唯一的文件名，避免与服务器文件重名-
urlstream_upload布尔值 如果是flash上传应该用URLStream 代替FileReference.uploadfalse
原文出处:/js/3.html
??????????
??????????编程开发子分类js实现图片上传并正常显示
作者：天空还下着雪
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js实现图片上传并正常显示，我们经常遇到上传照片的情况，如何实现图片上传，本文为大家进行揭晓
项目经常会用到头像上传，那么怎么实现呢？
首先是HTML布局：
&label for="thumbnail" class="col-md-3 control-label"&缩略图&/label&
&div class="col-md-6"&
&input type="file" class="form-control" id="thumbnail" name="thumbnail"&
jquery方式，IE不支持，但IE会获得绝对的上传路径信息：
function getObjectURL(file) {
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
$('#thumbnail').change(function() {
var eImg = $('&img /&');
eImg.attr('src', getObjectURL($(this)[0].files[0])); // 或 this.files[0] this-&input
$(this).after(eImg);});
网上找一份可用的代码非常不易，经过不断的筛选总结才得出兼容所有的文件上传显示
&form action='' method='post' name='myform'&
&input type='file' id='iptfileupload' onchange='show()' value='' /&
&img src='1.jpg' alt='' id='img' /&
&script type="text/javascript"&
function getPath(obj,fileQuery,transImg) {
var imgSrc = '', imgArr = [], strSrc = '' ;
if(window.navigator.userAgent.indexOf("MSIE")&=1){ // IE浏览器判断
if(obj.select){
obj.select();
var path=document.selection.createRange().
alert(path) ;
obj.removeAttribute("src");
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src",transImg);
obj.style.filter=
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+path+"', sizingMethod='scale');"; // IE通过滤镜的方式实现图片显示
throw new Error('File type Error! please image file upload..');
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
// alert(fileQuery.value) ;
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.src = fileQuery.
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
var file =fileQuery.files[0];
var reader = new FileReader();
reader.onload = function(e){
imgSrc = fileQuery.
imgArr = imgSrc.split('.') ;
strSrc = imgArr[imgArr.length - 1].toLowerCase() ;
if(strSrc.localeCompare('jpg') === 0 || strSrc.localeCompare('jpeg') === 0 || strSrc.localeCompare('gif') === 0 || strSrc.localeCompare('png') === 0){
obj.setAttribute("src", e.target.result) ;
throw new Error('File type Error! please image file upload..') ;
//}catch(e){
// alert('name: ' + e.name + 'message: ' + e.message) ;
// alert(e.target.result);
reader.readAsDataURL(file);
function show(){
//以下即为完整客户端路径
var file_img=document.getElementById("img"),
iptfileupload = document.getElementById('iptfileupload') ;
getPath(file_img,iptfileupload,file_img) ;
更多精彩内容请参考专题，和进行学习。
希望本文所述对大家学习javascript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具最近被安排做一个拖拽上传和文件夹上传的功能，不考虑兼容性，哈哈这个可以用HTML5实现。这里就不仔细学习HTML5，我只是想找例子，然后偷过来用，至于原理边用边学。
首先这里有一个很好的实例实现拖拽上传：
仔细看完估计原理你也会懂的。
然后是文件夹上传这里也有一个很好的实例：
这里文件夹上传只能在chrome11以后使用。
可是并不是那么一帆风顺，故事发生了：
文件夹上传的时候，如果文件夹内还有文件夹上面的那个例子就不能运行了，同时也不能保持目录结构。
js的方便就在于调试方便，更有利器console.log(obj).下面的内容是在仔细看了上面两个实例的基础上：
在第一个例子中有一个函数ParseFile，我在里面加了一个console.log（file），然后再chrome下面看到如下调试信息：
有了这个路径属性，我就可用在ajax中把次属性当做参数，用于保存目录结构。
xhr.open(&POST&, &upload.php?fname=&+file.webkitRelativePath, true);
然后upload.php添加处理函数：
function createFolder($path) {
if (!file_exists($path)) {
createFolder(dirname($path));
mkdir($path,0777);
$fn = (isset($_SERVER[&HTTP_X_FILENAME&]) ? $_SERVER[&HTTP_X_FILENAME&] : false);
$fname = $_GET[&fname&];
if ($fname!=&&&& $fname!=&undefined&) {
createFolder(&uploads/&.dirname($fname));
$targetfile = &uploads/& . $
$targetfile = &uploads/&.$
// AJAX call
if (file_put_contents($targetfile,file_get_contents(&php://input&))){
echo &ok&;
echo &failed&;
于是解决了多次文件夹上传的功能。
-----------------------------------------------
代码依次是：实例1（拖拽上传），实例2（文件夹上传），修改后的多层文件夹上传（细节请包容）
体验HTML5的魅力请参考：
本文附件下载:
相关 [html5 上传 文件] 推荐：
- ITeye博客
最近被安排做一个拖拽上传和文件夹上传的功能，不考虑兼容性，哈哈这个可以用HTML5实现. 这里就不仔细学习HTML5，我只是想找例子，然后偷过来用，至于原理边用边学. 首先这里有一个很好的实例实现拖拽上传：
/examples/tech/filedrag/1/index.html.
- 博客园_首页
前段时间做html5项目的时候，做了一个图片上传功能，并且可以直接预览，单纯的js就可以实现，很方便的.
这样做比调用后台方便多了，但是只支持html5的，html5以前是不支持的. 未来html5是主流，所以这种方法非常方便的.
几段js代码就可以来实现，而且解析速度也很快. 这种方法值得推广，以后前端也不要为这个烦恼了，还要后台用程序加载出来，那样太浪费时间了.
- BlogJava-首页技术区
多文件上传 jquery的插件. 使用的方法
导入 jquery.js 及 jquery.MultiFile.js ，. 方式一： 后台是文件数组
private File[] // 与jsp表单中的名称对应. 在 form 中加入 &input type=&file& name=&upload[]& class=&multi& /& 即可.
- Lynn - 张鑫旭-鑫空间-鑫生活
本文地址：/wordpress/?p=1923. 在XHTML的时代，我们使用HTML file控件上传图片一次只能上传一张. 要一次上传多图，做法是借助于flash. 可惜，使用复杂的点，比如flash文件需与页面同父文件夹，JavaScript文件大小也很可观.
　　早在公元日傍晚，人人网推出了一个很装B且完全无视IE浏览器的功能——拖拽上床. 哦，Sorry, 是
拖拽上传. 到现在，这个功能已经上线了整整半年，这篇文章也足足拖延了半年才分享给大家，实在是对不住了，呵呵，今后彬Go一定要勤奋发Blog. 您还可以参考以下HTML5相关文章:.
- Web前端 - ITeye博客
之前有篇文章说到HTML5的拖拽（. 这里说的拖拽图片只是弱化了拖的概念，而强化了拽的操作. 从浏览器外部拖动一个文件到浏览器中来，如：. 拖动文件到浏览器之后，就会打开浏览器支持的文件，如常用的txt、图片等，如下：. 操作如上常用文件，一般都有默认行为来处理这样的事件. 这里说的拖拽上传也是一个道理，就是要做的是从浏览器外部拖动文件到浏览器中来，并且在当前页面上传该文件.
- 开源软件 - ITeye博客
dubbo和hessian的maven依赖：. 服务提供者（项目名称：provider）. 首先是web.xml配置（使用spring）：. 最重要的applicationContext.xml ：. 参考：
dubbo hessian协议. &!-- 提供方应用信息，用于计算依赖关系 --&.
- Web前端 - ITeye博客
通过iframe来实现无刷新的的文件上传，其实是有刷新的，只是在iframe里面隐藏了而已. form里面的target要与iframe里面的id的值相等，指示是form相应了post事件，也就是post时间相应的时候刷新的是iframe而不是整个页面. 用户名: &input type=&text& name=&username& /&&br /& 上传头像: &input.
- ITeye博客
在网上搜索的代码 参考整理了一份. commons-fileupload.jar与commons-io-1.4.jar二个文件. 1、表单属性为: enctype=&multipart/form-data&. 2、springmvc配置. &!-- 设置上传文件的最大尺寸为10MB --&.
- ITeye博客
本人原创作品，原文发表在：. 在HTML5中，出现了众多的新的技术和特性，而本文将介绍的是目前HTML5标准中，对如何将用户客户端的文件拖拉到浏览器这一特性进行初步的讲解. 在HTML5中的标准中，提到了希望能在新一代浏览器中，支持用户直接将客户端桌面的文件拖放到浏览器中，甚至鼓励做更多的工作(比如上传文件).
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。