[英]View image before upload
I need to show upload image before upload using jquery but in chrome path shown fake path like this: 我需要在使用jquery上传之前显示上传图片,但在chrome路径中显示的是伪造路径,如下所示:
C:\fakepath\myImage.jpg
and in firefox it's shown only file name: 在firefox中,仅显示文件名:
myImage.jpg
so how can me preview my image file before uploading 所以我如何在上传之前预览图像文件
<input type="file">
<img src="" class="preview" />
if that is impossible.. what about HTML5? 如果那是不可能的.. HTML5呢?
I don't know of a jQuery function (sorry), but it is possible with HTML5, and most browsers support this HTML5 function. 我不知道jQuery函数(对不起),但是HTML5可以实现,并且大多数浏览器都支持此HTML5函数。 I found a piece of code in HTML5rocks (1):
我在HTML5rocks(1)中找到了一段代码:
<style>
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
</style>
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Good luck :) 祝好运 :)
(1) HTML5rocks - Reading Files: http://www.html5rocks.com/en/tutorials/file/dndfiles/ (1)HTML5rocks-读取文件: http ://www.html5rocks.com/en/tutorials/file/dndfiles/
You can't. 你不能 You need to upload image using ajax, for example, return image url and finally display it.
您需要使用ajax上传图像,例如,返回图像URL并最终显示它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.