出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览。
先粘上以下插件,在别的图片上传功能说不定各位能用的上。
1、jQuery File Upload
Demo地址:http://blueimp.github.io/jQuery-File-Upload/
优点是使用jquery进行图片的异步上传,可控性好,可根据自己的需求任意定制;
缺点是在IE9等一些浏览器中,不支持图片预览,图片选择框中不支持多文件选择(这点是我抛弃它的原因);
2、CFUpdate
Demo地址:http://plete(file) {
try {
if (this.getStats().files_queued > 0) {
this.startUpload();
}
} catch (ex) {
this.debug(ex);
}
}
// 单个文件上传错误时处理
function uploadError(file, errorCode, message) {
var imageName = "imgerror.png";
try {
var index = file.id.substr(file.id.lastIndexOf('_') + 1);
$("#li" + index).html("");
$("#li" + index).html('<img src="/style/image/imgerror.png" alt=""/>');
index++;
} catch (ex3) {
this.debug(ex3);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 600px;">
<div class="divTxt">
文本框
</div>
<div style="height: 30px; line-height: 30px;">
<div id="divBtn" style="float: left; width: 26px; height: 26px;">
</div>
<div style="float: right;">
<input id="btnReply" type="button" value="发表" />
</div>
</div>
<div id="divImgs" style="border: 1px solid #cdcdcd; display: none;">
<div>
上传图片</div>
<ul id="ulUpload" class="ulUpload">
</ul>
</div>
</div>
</form>
</body>
</html>
使用Vs2010开发,以下为项目源码地址
