jquery 打开html文件类型,关于html5：如何使用jQuery在弹出窗口中预览输入类型=“文件”中的所选图像？...

本问题已经有最佳答案，请猛点这里访问。

在我的代码中，我允许用户上传图像。 现在我想在同一个弹出窗口中将此选定图像显示为预览。 我怎么能用jQuery做到这一点？

以下是我在弹出窗口中使用的输入类型。

HTML代码：

你用什么服务器端代码上传它？ 你需要使用它。

看看html5 FileReader

@Prasad，你必须使用某种插件，访问这个plugins.jquery.com

演示

HTML：

   

jQuery的

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#blah').attr('src', e.target.result);

}

reader.readAsDataURL(input.files[0]);

}

}

$("#imgInp").change(function(){

readURL(this);

});

参考

谢谢prabu，但它没有提供完整的图像路径，它只是返回一个图像名称

您使用的浏览器

所有铬，莫兹拉，歌剧，野生动物园除了IE

使用$('＃imgInp')。val()来获取完整路径

神奇的技巧prabu！，:)是FileReader()是HTML5 API吗？你能不能给我链接，我可以获得新的html5 API列表及其详细信息

developer.mozilla.org/en-US/docs/Web/API

这真是太神奇了。得到它在ie10工作。绝对不能在ie9或更早的时候工作(通过我的测试。)谢谢。

@PrabuParthipan答案就像一个魅力。谢谢。

在IE9或IE8中不支持，但除此之外它还有很好的支持... caniuse.com/#feat=filereader

当我有四个文件输入时，我该怎么办..？请解决方法怎么做..谢谢..

如果您使用的是HTML5，请尝试使用以下代码段

function PreviewImage() {

var oFReader = new FileReader();

oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);

oFReader.onload = function (oFREvent) {

document.getElementById("uploadPreview").src = oFREvent.target.result;

};

};

接受的答案有什么不同？我没有看到任何HTML5相关的差异......(BTW onload声明应该在.readAsDataURL方法调用之前)

function img_pathUrl(input){

$('#img_url')[0].src = (window.URL ? URL : webkitURL).createObjectURL(input.files[0]);

}

这个问题已有几个高质量的答案，其中大部分都是在两年前提出问题时发布的。尽管尝试回答诸如此类之类的简单问题以提高您的编程能力可能是一项值得的练习，但在当前状态下发布此答案并不会增加任何问题。如果你的答案有一些新颖的东西，请用几句话来解释它的不同之处以及为什么它会变得更好。

只需检查我的脚本是否正常运行：

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 = [''].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);

#list img{

width: auto;

height: 100px;

margin: 10px ;

}

您可以使用ajax上传来预览所选文件。

http://zurb.com/playground/ajax-upload

但是如果他想在上传之前预览文件呢？