function previewFile() {
var preview = document.querySelector('img');
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function showMyImage(fileInput) {
var files = fileInput.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /image.*/;
if (!file.type.match(imageType)) {
continue;
}
var img=document.getElementById("thumbnil");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
/**
* @param {domElement} input - The input element
* @param {string} typeData - The type of data to be return in the event object.
*/
function loadFileFromInput(input,typeData) {
var reader,
fileLoadedEvent,
files = input.files;
if (files && files[0]) {
reader = new FileReader();
reader.onload = function (e) {
fileLoadedEvent = new CustomEvent('fileLoaded',{
detail:{
data:reader.result,
file:files[0]
},
bubbles:true,
cancelable:true
});
input.dispatchEvent(fileLoadedEvent);
}
switch(typeData) {
case 'arraybuffer':
reader.readAsArrayBuffer(files[0]);
break;
case 'dataurl':
reader.readAsDataURL(files[0]);
break;
case 'binarystring':
reader.readAsBinaryString(files[0]);
break;
case 'text':
reader.readAsText(files[0]);
break;
}
}
}
function fileHandler (e) {
var data = e.detail.data,
fileInfo = e.detail.file;
img.src = data;
}
var input = document.getElementById('inputId'),
img = document.getElementById('imgId');
input.onchange = function (e) {
loadFileFromInput(e.target,'dataurl');
};
input.addEventListener('fileLoaded',fileHandler)
function init() {
$("img[data-type=editable]").each(function (i, e) {
var _inputFile = $('<input/>')
.attr('type', 'file')
.attr('hidden', 'hidden')
.attr('onchange', 'readImage()')
.attr('data-image-placeholder', e.id);
$(e.parentElement).append(_inputFile);
$(e).on("click", _inputFile, triggerClick);
});
}
function triggerClick(e) {
e.data.click();
}
Element.prototype.readImage = function () {
var _inputFile = this;
if (_inputFile && _inputFile.files && _inputFile.files[0]) {
var _fileReader = new FileReader();
_fileReader.onload = function (e) {
var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
var _img = $("#" + _imagePlaceholder);
_img.attr("src", e.target.result);
};
_fileReader.readAsDataURL(_inputFile.files[0]);
}
};
//
// IIFE - Immediately Invoked Function Expression
// https://stackoverflow.com/questions/18307078/jquery-best-practises-in-case-of-document-ready
(
function (yourcode) {
"use strict";
// The global jQuery object is passed as a parameter
yourcode(window.jQuery, window, document);
}(
function ($, window, document) {
"use strict";
// The $ is now locally scoped
$(function () {
// The DOM is ready!
init();
});
// The rest of your code goes here!
}));
function readURL(input) {
if (input.files && input.files[0]) {
var i;
for (i = 0; i < input.files.length; ++i) {
var reader = new FileReader();
reader.onload = function (e) {
$('#form1').append('<img src="'+e.target.result+'">');
}
reader.readAsDataURL(input.files[i]);
}
}
}
18 回答
对于我的应用程序,加密的GET url参数,只有这个工作 . 我总是得到一个
TypeError: $(...) is null
. 取自https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL是 . 有可能的 .
HTML
JS
你可以从这里得到Live Demo .
有几种方法可以做到这一点 . 最有效的方法是在<input>的File上使用URL.createObjectURL() . 将此URL传递给img.src,告诉浏览器加载提供的图像 .
这是一个例子:
您还可以使用FileReader.readAsDataURL()来解析<input>中的文件 . 这将在内存中创建一个包含图像的base64表示的字符串 .
HTML
当处理具有无效类型(例如pdf)的文件时,这也会处理这种情况
这是一个 multiple files 版本,基于Ivan Baev的回答 .
The HTML
JavaScript / jQuery
由于使用$ .parseHTML,需要jQuery 1.8,这应该有助于XSS缓解 .
这将是开箱即用的,你需要的唯一依赖是jQuery .
LeassTaTT的答案在FF和Chrome等“标准”浏览器中运行良好 . IE的解决方案存在,但看起来不同 . 这里描述跨浏览器解决方案:
在HTML中我们需要两个预览元素,img用于标准浏览器,div用于IE
HTML:
在CSS中,我们指定以下IE特定的东西:
CSS:
在HTML中,我们包括标准和IE特定的Javascripts:
pic_preview.js
是来自LeassTaTT答案的Javascript . 将$('#blah')
替换为$('#preview')
并添加$('#preview').show()
现在IE特定的Javascript(pic_preview_ie.js):
那是 . 适用于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
如何创建一个加载文件并触发自定义事件的函数 . 然后将一个监听器附加到输入 . 这样我们就可以更灵活地使用该文件,而不仅仅是预览图像 .
可能我的代码不如某些用户好,但我认为你会明白这一点 . 在这里你可以看到example
请看下面的示例代码:
此外,你可以try this sample here .
我编辑了@ Ivan的答案,显示“无预览可用”图像,如果它不是图像:
使用JavaScript(jQuery)和HTML5的多个图像的示例
JavaScript (jQuery)
Markup (HTML)
以下是工作代码 .
Javascript:
试试这个
干净简单JSfiddle
当您希望从div或按钮间接触发事件时,这将非常有用 .
这是我的代码 . 支持IE [6-9],chrome 17,firefox,Opera 11,Maxthon3
HTML
JavaScript的:
这个解决方案怎么样?
只需将数据属性“data-type = editable”添加到图像标记中,如下所示:
当然,你的项目的脚本......
See demo at JSFiddle
我已经制作了一个插件,可以通过互联网在IE 7中生成预览效果,但几乎没有限制 . 我把它放入github page以便更容易获得它
单线解决方案:
以下代码使用对象URL,这比查看大图像的数据URL更有效(数据URL是包含所有文件数据的大字符串,而对象URL,只是引用文件数据的短字符串 - 记忆):
生成的URL将如下:
对于多图像上传(修改@ IvanBaev的解决方案)
http://jsfiddle.net/LvsYc/12330/
希望这有助于某人 .