前言
最近在做MVC项目,在处理图片上传功能上遇到了一道坎。之前是使用webuploader插件实现图片上传,但在处理多实例问题时,一直难以跨过。几经思索,再次踏上了学习之路。
疑难问题
1.在之前使用webuploader时,在处理多图上传问题上,疑惑众多。
2.其在处理多实例问题上,也存在问题,虽说功能强大,但后期维护过于繁琐,给项目进度照常影响。
解决方案
对于以上问题,我们将换种方式去处理,基本思路是使用input 的file文件属性来实现图片上传的功能。这次功能实现采用两个实例(即在一个页面有多个独立的图片上传按钮及图片展示区),并却实现多图上传。
上传图片并显示
1.实现布局
在表单中实现基础布局,设置相应属性,代码如下:
<tr class="uploader_row">
<td>主题图片</td>
<td colspan="7" class="img">
<div id="file_list1">
<img id="default_img" />
</div>
</td>
<td class="img" valign="middle" colspan="2">
<div>
<div id="uploader" class="webuploader">
<div class="upload_btns">
<!-- 只接受jpg,gif和png格式 -->
<input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 0)" />
<span id="upload">选择并上传文件</span>
<span class="upload_input_rmk">支持多图上传</span>
</div>
</div>
</div>
</td>
</tr>
<tr class="uploader_row">
<td>详情图片</td>
<td colspan="7" class="img">
<div id="file_list2">
<img id="default_img" />
</div>
</td>
<td class="img" valign="middle" colspan="2">
<div>
<div id="uploader" class="webuploader">
<div class="upload_btns">
<!-- 只接受jpg,gif和png格式 -->
<input id="upload_input" type="file" accept="image/gif, image/jpg, image/png,image/jpeg,image/bmp" multiple onchange="showImg(this,@Id, 1)" />
<span id="upload">选择并上传文件</span>
<span class="upload_input_rmk">支持多图上传</span>
</div>
</div>
</div>
</td>
</tr>
【内容解析】
1.实现图片上传使用input file文件类型。
2.设置可上传图片格式,使用accept属性:image/gif, image/jpg, image/png,image/jpeg,image/bmp。
3.设置多图上传属性multiple。
2.图片浏览上传及显示
在上一步中,已经布局好图片上传,现在实现上传及显示。读取图片文件并显示,这里使用两种方式实现,如下:
1)使用window.URL.createObjectURL(file)读取file实例并显示图片
//显示图片
function showImg(obj, id, type) {
var files = obj.files;
//使用window.URL.createObjectURL(file)读取file实例并显示图片
document.getElementById("imgContainer").innerHTML = getImgsByUrl(files);
}
// 使用window.URL.createObjectURL(file)读取file实例并显示图片
function getImgsByUrl(files) {
var elements = '&#