我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
我希望能够在上传文件(图像)之前预览它。预览操作应该在浏览器中全部执行,而不使用Ajax上传图像。
我该怎么做?
当前回答
我已经制作了一个插件,由于互联网,它可以在IE 7+中生成预览效果,但几乎没有限制。我把它放进github页面,这样更容易获取
$(函数(){$(“input[name=file1]”).previewimage({div:“.preview”,imgwidth:180,高度:120});$(“input[name=file2]”).previewimage({div:“.preview 2”,imgwidth:90,高度:90});});.preview>div{显示:内联块;文本对齐:居中;}.preview2>div{显示:内联块;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js“></script>预览<div class=“preview”></div>预览2<div class=“preview2”></div><form action=“#”method=“POST”enctype=“multipart/form data”><input-type=“file”name=“file1”><input-type=“file”name=“file2”><input-type=“submit”></form>
其他回答
我已经制作了一个插件,由于互联网,它可以在IE 7+中生成预览效果,但几乎没有限制。我把它放进github页面,这样更容易获取
$(函数(){$(“input[name=file1]”).previewimage({div:“.preview”,imgwidth:180,高度:120});$(“input[name=file2]”).previewimage({div:“.preview 2”,imgwidth:90,高度:90});});.preview>div{显示:内联块;文本对齐:居中;}.preview2>div{显示:内联块;文本对齐:居中;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js“></script><script src=“https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js“></script>预览<div class=“preview”></div>预览2<div class=“preview2”></div><form action=“#”method=“POST”enctype=“multipart/form data”><input-type=“file”name=“file1”><input-type=“file”name=“file2”><input-type=“submit”></form>
我编辑了@Ivan的答案,以显示“无预览可用”图像,如果它不是图像:
function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
var reader = new FileReader();
reader.onload = function (e) {
$('.imagepreview').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}else{
$('.imagepreview').attr('src', '/assets/no_preview.png');
}
}
在React中,如果文件在你的props中,你可以使用:
{props.value instanceof File && (
<img src={URL.createObjectURL(props.value)}/>
)}
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>
这个解决方案怎么样?
只需将数据属性“data type=editable”添加到图像标记中,如下所示:
<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />
还有你项目的脚本。。。
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!
}));
见JSFiddle演示