使用jQuery预览多个文件
Multiple file preview using jQuery
我正在使用HTML5 API文件阅读器预览图像文件。这是我的工作代码:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image_preview')
.attr('src', e.target.result)
.width(150)
.height('auto');
};
reader.readAsDataURL(input.files[0]);
}
}
以及HTML
<img id="image_preview" src="#" alt="" />
目前,这只允许用户一次预览一张图像,我该如何更改代码以允许多张图像预览?
function readURLs(input) {
if (input.files) {
for (int i = 0; i < input.files.length; ++i) {
var file = input.files[i];
var reader = new FileReader();
reader.onload = function (e) {
$('#image_preview'+(i+1))
.attr('src', e.target.result)
.width(150)
.height('auto');
};
reader.readAsDataURL(file);
}
}
}
带有HTML
<img id="image_preview1" src="#" alt="" />
<img id="image_preview2" src="#" alt="" />
<img id="image_preview3" src="#" alt="" />
相关文章:
- 删除表,但不删除表单和文件 jQuery
- Ruby on Rails:“找不到文件'jquery.ui.datepicker'”
- 从 html 页面调用文件 jQuery 文件
- Javascript 文件修改了未从中调用它的 html 文件?Jquery 选择器
- 未呈现Javascript文件/Jquery
- 上传文件jQuery ajax MVC
- 我在哪里可以得到这个文件jquery.min.js
- 使用委托点击按钮下载文件JQuery
- 找不到文件“jquery-ui”
- JavaScript文件(jQuery步骤)未在Google Chrome中加载
- 自动内联CSS从CSS文件(jquery?ajax吗?php ?)
- 如何使用本地json文件jquery或angularjs实现文本框的自动完成
- 在JSPX文件中包含JS文件(JQuery)
- 如何将变量值从后面的代码传递到外部JavaScript文件(jQuery文件)
- 如何获得扩展图像文件jquery.filer
- 检测设备和交换CSS文件- jQuery
- 警报文本从文件JQuery / javascript
- 如何排序日期和字符串在同一列在jquery插件有文件jquery. datatable .js
- 移动谷歌地图api代码到单独的文件+ jquery
- 获取按钮id从js文件和使用在另一个js文件- jquery