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

debugcn 发表于 Dev

Fizzix

因此，基本上，正如标题所述，我希望有一个上传按钮，该按钮允许客户端上传图像，然后将其显示在div中。

当然，这只是客户端，因此如果刷新页面，则图像将消失。

然后将对图像进行相应的样式设置，并为其指定固定的宽度和高度。

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

jQuery非常新，尽管我可以熟练地使用Java编写代码。

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

非常感谢所有帮助。

纳纳斯

这是您正在寻找的工作中的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来回答您的一些注释问题。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。