如何使用 jQuery 客户端上传图像并将其添加到 div?
Posted
技术标签:
【中文标题】如何使用 jQuery 客户端上传图像并将其添加到 div?【英文标题】:How to upload an image with jQuery client side and add it to a div? 【发布时间】:2013-10-01 02:09:26 【问题描述】:所以基本上,正如标题所说,我想要一个上传按钮,允许客户端上传图片,然后将其显示在 div 中。
当然,这只是客户端,所以如果页面被刷新,图像就会消失。
然后将相应地设置图像的样式并给定固定的宽度和高度。
我在网上搜索,根本找不到任何东西。
对 jQuery 很陌生,虽然我可以用 javascript 流利地编写代码。
如果没有 AJAX 和/或 php 的帮助,也不确定这是否可行。如果可能,希望避免这些。
非常感谢所有帮助。
【问题讨论】:
你说的每件事都非常有可能,但你不觉得自己应该先行一步吗? @MarsOne 有时,当您甚至不知道起跑线在哪里时,很难“抢占先机”。 @SpYk3HH,这是我在 SO 上听到的最好的台词?谁说的? @SpYk3HH,我不同意这个问题是合法的,远非如此。 OP 没有生成任何代码来显示他/她的尝试。他也没有说明他是否尝试过任何事情。仅提及在线搜索。我的意思是,如果我们开始鼓励这些问题,我们就违背了 SO 是“排他性”的目的 许多“小伙伴”来这里学习,并在正确的道路上找到一些鼓励。如果我们只是否定他们,尤其是在他们得到答案之后,他们可能会变得灰心。然后,您只是将另一个可能成为“下一件大事”的“潜在智慧”完全从水中击倒,因为您想要从这个网站获得不存在的东西.如果您想要一个独家代码站点,请加入一个论坛。否则,请享受 Question 和 Answer 网站 【参考方案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="#" />
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="#" />
</form>
请参阅此处制作的jsFiddle Fork,以帮助解释如何更多地使用 jQuery 来回答您的一些评论问题。
【讨论】:
该死的!这正是我放在一起的!大声笑 哇,效果很好!谢谢你的帮助!并且不走运 SpYk3HH,但无论如何都有一个赞成你的人哈哈。 顺便说一句,您可以通过将readURL
设置为更改功能来轻松缩短它。
不知道该怎么做哈哈...如何为创建的图像添加样式?比如一个宽高,或者更简单,只是一个 CSS 类?
@fizzix 您只需将类添加到您正在设置源代码的<img>
标记中。【参考方案2】:
参考这个http://www.codeforest.net/html5-image-upload-resize-and-crop
你可以使用像 canvas 这样的 HTML5 标签来做同样的事情……你也可以使用一些 Jquery 插件,比如 jCrop 来做同样的事情……
【讨论】:
以上是关于如何使用 jQuery 客户端上传图像并将其添加到 div?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 mean.js 上传图像并将其保存到数据库(猫鼬)