如何使用 jQuery 客户端上传图像并将其添加到 div？答案

【问题标题】：How to upload an image with jQuery client side and add it to a div?如何使用 jQuery 客户端上传图像并将其添加到 div？
【发布时间】：2013-10-01 02:09:26
【问题描述】：

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

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

然后将相应地设置图像的样式并给定固定的宽度和高度。

我在网上搜索，根本找不到任何东西。

对 jQuery 很陌生，虽然我可以用 Javascript 流利地编写代码。

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

非常感谢所有帮助。

【问题讨论】：

你说的每件事都非常有可能，但你不觉得自己应该先行一步吗？
@MarsOne 有时，当您甚至不知道起跑线在哪里时，很难“抢占先机”。
@SpYk3HH，这是我在 SO 上听到的最好的台词？谁说的？
@SpYk3HH，我不同意这个问题是合法的，远非如此。 OP 没有生成任何代码来显示他/她的尝试。他也没有说明他是否尝试过任何事情。仅提及在线搜索。我的意思是，如果我们开始鼓励这些问题，我们就违背了 SO 是“排他性”的目的
许多“小伙伴”来这里学习，并在正确的道路上找到一些鼓励。如果我们只是否定他们，尤其是在他们得到答案之后，他们可能会变得灰心。然后，您只是将另一个可能成为“下一件大事”的“潜在智慧”完全从水中击倒，因为您想要从这个网站获得不存在的东西.如果您想要一个独家代码站点，请加入一个论坛。否则，请享受 Question 和 Answer 网站

标签： javascript jquery upload append

【解决方案1】：

这是您正在寻找的工作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);

附带说明，上述解决方案使用 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>

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

【讨论】：

该死的！这正是我放在一起的！大声笑
哇，效果很好！谢谢你的帮助！并且不走运 SpYk3HH，但无论如何都有一个赞成你的人哈哈。
顺便说一句，您可以通过将readURL 设置为更改功能来轻松缩短它。
不知道该怎么做哈哈...如何为创建的图像添加样式？比如一个宽高，或者更简单，只是一个 CSS 类？
@fizzix 您只需将类添加到您正在设置源代码的<img> 标记中。

【解决方案2】：

参考这个http://www.codeforest.net/html5-image-upload-resize-and-crop

你可以使用像 canvas 这样的 HTML5 标签来做同样的事情……你也可以使用一些 Jquery 插件，比如 jCrop 来做同样的事情……

【讨论】：