如何使用 jQuery 客户端上传图像并将其添加到 div? [英] How to upload an image with jQuery client side and add it to a div?

问题描述

所以基本上，正如标题所说，我想要一个上传按钮，允许客户端上传图像，然后它会显示在一个 div 中.

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.

当然，这只是客户端，所以如果页面被刷新，那么图像就会消失.

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.

对 jQuery 非常陌生，尽管我可以流利地使用 Javascript 编写代码.

Very new to jQuery, although I can code fluently in Javascript.

如果没有 AJAX 和/或 PHP 的帮助，也不确定这是否可行.如果可能，希望避免这些.

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.

非常感谢所有帮助.

推荐答案

Here is a working JSFiddle你在找什么

Here is a working JSFiddle for what you are looking for

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);

作为旁注，上述解决方案使用 jQuery，尽管它不是工作解决方案所必需的，仅 Javascript :

As a side note, the above solution uses jQuery although it is not required for a working solution, Javascript only :

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>

请参阅此处制作的 jsFiddle Fork 以帮助解释如何制作更多使用 jQuery 来回答您的一些评论问题.

See the jsFiddle Fork made here to help explain how to make more use of jQuery to answer some of your comment questions.

这篇关于如何使用 jQuery 客户端上传图像并将其添加到 div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！