我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
使用JavaScript(jQuery)和HTML5的多个图像示例
JavaScript(jQuery)
function readURL(input) {
for(var i =0; i< input.files.length; i++){
if (input.files[i]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $('<img id="dynamic">');
img.attr('src', e.target.result);
img.appendTo('#form1');
}
reader.readAsDataURL(input.files[i]);
}
}
}
$("#imgUpload").change(function(){
readURL(this);
});
}
标记(HTML)
<form id="form1" runat="server">
<input type="file" id="imgUpload" multiple/>
</form>
其他回答
以下是工作代码。
<input type='file' onchange="readURL(this);" />
<img id="ShowImage" src="#" />
Java脚本:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#ShowImage')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
干净简单J小提琴
当您希望通过div或按钮间接触发事件时,这将非常有用。
<img id="image-preview" style="height:100px; width:100px;" src="" >
<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">
<button onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>
<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
var fileinputElement = document.getElementById(hidden_input_image);
fileinputElement.click();
}
</script>
imgInp.oncange=evt=>{const[file]=imgInp.fileif(文件){blah.src=URL.createObjectURL(文件)}}<form runat=“server”><input accept=“image/*”type='file'id=“imgInp”/><img id=“blah”src=“#”alt=“your image”/></form>
使用纯JavaScript以可重用的方式在单个函数中预览多个文件和单个文件
函数imagePreviewFunc(即,previewerId){let files=that.filepreviewerId.innerHTML=“”//重置图像预览元素for(假设i=0;i<files.length;i++){let imager=document.createElement(“img”);imager.src=URL.createObjectURL(文件[i]);previewerId.append(成像器);}}<input accept=“image/*”type='file'id=“imageInput_1”onchange=“imagePreviewFunc(this,imagePreview_1)”/><div id=“imagePreview_1”>此分区用于单图像预览</div><hr/><input class=“form control”accept=“image/*”type='file'id=“imageInput_2”multiple=“true”onchange=“imagePreviewFunc(this,imagePreview_2)”/><div id=“imagePreview_2”>此div用于多图像预览</div>
LeassTaTT的答案在FF和Chrome等“标准”浏览器中运行良好。IE的解决方案存在,但看起来有所不同。此处描述了跨浏览器解决方案:
在HTML中,我们需要两个预览元素,img用于标准浏览器,div用于IE
HTML格式:
<img id="preview"
src=""
alt=""
style="display:none; max-width: 160px; max-height: 120px; border: none;"/>
<div id="preview_ie"></div>
在CSS中,我们指定了以下特定于IE的内容:
CSS:
#preview_ie {
FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}
在HTML中,我们包括标准和特定于IE的Javascript:
<script type="text/javascript">
{% include "pic_preview.js" %}
</script>
<!--[if gte IE 7]>
<script type="text/javascript">
{% include "pic_preview_ie.js" %}
</script>
pic_preview.js是LeassTaTT答案中的Javascript。将$(“#blah”)替换为$(“#预览”),并添加$(“#预览”).show()
现在,特定于IE的Javascript(pic_preview_IE.js):
function readURL (imgFile) {
var newPreview = document.getElementById('preview_ie');
newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value;
newPreview.style.width = '160px';
newPreview.style.height = '120px';
}
就是这样。适用于IE7、IE8、FF和Chrome。请在IE9中测试并报告。IE预览的想法可以在这里找到:http://forums.asp.net/t/1320559.aspx
http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx