PHP仿微信多图片预览下载演示地点:http://www.erdangjiade.com/js…
临盆图片地区,上传按钮#btn可替代本身想要的图片
[html] view plain copy
在CODE上检察代码片派生到我的代码片
<ul id="ul_pics" class="ul_pics clearfix">
<li><img src="logo.png" id="btn" class="img_common" /></li>
</ul>
plupload上传
[javascript] view plain copy
在CODE上检察代码片派生到我的代码片
var uploader = new plupload.Uploader({//建立实例的组织要领
runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种体式格局的优先级递次
browse_button: 'btn', // 上传按钮
url: "ajax.php", //长途上传地点
flash_swf_url: 'plupload/Moxie.swf', //flash文件地点
silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地点
filters: {
max_file_size: '10mb', //最大上传文件大小(花样100b, 10kb, 10mb, 1gb)
mime_types: [//许可文件上传范例
{title: "files", extensions: "jpg,png,gif,jpeg"}
]
},
multi_selection: true, //true:ctrl多文件上传, false 单文件上传
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 id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").prepend(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中,显现进度条
var percent = file.percent;
$("#" + file.id).find('.bar').css({"width": percent + "%"});
$("#" + file.id).find(".percent").text(percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传胜利的时刻触发
var data = eval("(" + info.response + ")");//剖析返回的json数据
$("#" + file.id).html("<input type='hidden'name='pic[]' value='" + data.pic + "'/><input type='hidden'name='pic_name[]' value='" + data.name + "'/><img class='img_common' onclick=delPic('" + data.pic + "','" + file.id + "') src='" + data.pic + "'/>");//追加图片
},
Error: function(up, err) { //上传失足的时刻触发
alert(err.message);
}
}
});
uploader.init();
ajax删除上传的图片
[javascript] view plain copy
在CODE上检察代码片派生到我的代码片
function delPic(pic, file_id) { //删除图片 参数1图片途径 参数2 随机数
if (confirm("确定要删除吗?")) {
$.post("del.php", {pic: pic}, function(data) {
$("#" + file_id).remove()
})
}
}