如何使用 jQuery 客户端上传图像并将其添加到 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19005678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to upload an image with jQuery client side and add it to a div?
提问by Fizzix
So basically, as the title says, I want to have an upload button that allows a client to upload an image and it will then be displayed in a div.
所以基本上，正如标题所说，我想要一个上传按钮，允许客户端上传图像，然后它会显示在一个 div 中。
Of course, this would just be client side, so if the page was ever refreshed then the image would disappear.
当然，这只是客户端，所以如果页面被刷新，那么图像就会消失。
The image would then be styled accordingly and given fixed widths and heights.
然后将相应地对图像进行样式设置并赋予固定的宽度和高度。
I searched online and couldn't find anything at all.
我在网上搜索，根本找不到任何东西。
Very new to jQuery, although I can code fluently in Javascript.
虽然我可以流利地使用 Javascript 编写代码，但我对 jQuery 非常陌生。
Also not to sure if this is possible or not without the help of AJAX and/or PHP. Would like to avoid these if possible.
如果没有 AJAX 和/或 PHP 的帮助，也不确定这是否可行。如果可能，希望避免这些。
All help is greatly appreciated.
非常感谢所有帮助。
回答by Nunners
Here is a working JSFiddlefor what you are looking for
这是您正在寻找的工作的JSFiddle
function readURL(e) {
if (this.files && this.files[0]) {
var reader = new FileReader();
$(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
reader.readAsDataURL(this.files[0]);
}
}
$("#imgInp").change(readURL);
As a side note, the above solution uses jQuery although it is not required for a working solution, Javascript only :
作为旁注，上述解决方案使用 jQuery，尽管它不是工作解决方案所必需的，仅 Javascript ：
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById('blah').src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
And the HTML:
<input type='file' id="imgInp" onchange="readURL(this);" />
<img id="blah" src="#" alt="your image" />
function readURL() {
// rehide the image and remove its current "src",
// this way if the new image doesn't load,
// then the image element is "gone" for now
$('#blah').attr('src', '').hide();
if (this.files && this.files[0]) {
var reader = new FileReader();
$(reader).load(function(e) {
$('#blah')
// first we set the attribute of "src" thus changing the image link
.attr('src', e.target.result) // this will now call the load event on the image
});
reader.readAsDataURL(this.files[0]);
}
}
// below makes use of jQuery chaining. This means the same element is returned after each method, so we don't need to call it again
$('#blah')
// here we first set a "load" event for the image that will cause it change it's height to a set variable
// and make it "show" when finished loading
.load(function(e) {
// $(this) is the jQuery OBJECT of this which is the element we've called on this load method
$(this)
// note how easy adding css is, just create an object of the css you want to change or a key/value pair of STRINGS
.css('height', '200px') // or .css({ height: '200px' })
// now for the next "method" in the chain, we show the image when loaded
.show(); // just that simple
})
// with the load event set, we now hide the image as it has nothing in it to start with
.hide(); // done
$("#imgInp").change(readURL);<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>See the jsFiddle Forkmade here to help explain how to make more use of jQuery to answer some of your comment questions.
请参阅此处制作的jsFiddle Fork以帮助解释如何更多地使用 jQuery 来回答您的一些评论问题。
回答by Neel
Refer this http://www.codeforest.net/html5-image-upload-resize-and-crop
请参阅此http://www.codeforest.net/html5-image-upload-resize-and-crop
you can use HTML5 tags like canvas for the same...and you can also use some Jquery plugins like jCrop for the same..
你可以使用像画布这样的 HTML5 标签......你也可以使用一些 Jquery 插件，比如 jCrop ......
