图片上传按钮 div答案

【问题标题】：Image upload button div图片上传按钮 div
【发布时间】：2012-01-05 14:29:10
【问题描述】：

如何将这个jsFiddle 中id 为“uploadWrapper”的div 变成一个可以上传图片的按钮——基本上和<input type="file"> 做的一样。提前致谢。

编辑 - 由于收到答复

当有人上传图片时，如何在蓝色背景的 div 位置显示图片预览，请参阅jsFiddle

【问题讨论】：

请看我的回答，里面有代码示例和演示如何达到相应的效果。
Plupload 允许您将图像上传提交到您的服务器，并取回上传的图像位置，然后您可以将其显示在页面上您想要的任何位置。
我看不到如何在不使用 Plupload 重新加载的情况下预览图像
重装？你的意思是不重新加载？
抱歉，已编辑。示例：dondedeportes.es/uploader-previewer

标签： javascript jquery html css button

【解决方案1】：

检查这个小提琴：http://jsfiddle.net/techfoobar/kM9aa/1/

预览：就像 Justin Satyr 所说，除非您将所选图片上传到服务器并使用上传图片的 URL，否则无法使用计划 HTML/JS 预览所选图片。

【讨论】：

这在 IE8 中不起作用。它只显示浏览按钮的最右边缘。
嗯.. 好吧.. 可以说 -1 是不需要的.. :)

【解决方案2】：

这并不像想象的那么容易，并且出于安全目的，某些浏览器会自动阻止从不受信任的元素触发文件上传。

我建议使用第三方文件上传插件，例如Plupload，或者使用渐进增强伪造自定义按钮（不可见的文件上传按钮，其下带有自定义图形（当然不是最灵活的解决方案）作为此处描述：

http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

Plupload 事件允许您挂钩在 ajax 文件上传期间可能发生的事件，并对上传信息进行处理。有关您可能获得的响应数据的示例，请参阅此页面：

http://www.plupload.com/example_events.php

你可以像这样得到响应数据：

id=p16in5el9ne2fc1rd08120in081
name=denim.png
size=20623
loaded=20623
percent=100
status=DONE
target_name=p16in5el9ne2fc1rd08120in081.png

当然，您可以修改服务器在成功上传时返回的内容，以便能够获取上传图片的完整绝对 URL。

获得这些数据后，您可以挂钩并切换图像，执行以下操作（使用 jQuery）：

// Called when a file has finished uploading
FileUploaded: function(up, file, info) {
    $('#id_of_the_image').attr('src', 'uploads/' + file.target_name);
}

【讨论】：

使用 Plupload 很聪明，因为它允许您以非常简单的方式支持文件上传，同时支持许多浏览器。 :)

【解决方案3】：

除非您使用 Flash、Silverlight 或 Active-X 对象，否则您不能。浏览器锁定所有文件浏览操作。

您可以通过使<input type="file" /> 不可见但在按钮上来实现这一点，这样当用户单击“按钮”时，他们实际上是在单击input。

更新：

回答您的第二个问题，要预览图像，您需要将其发布到您的服务器，然后将您的img 的src 指向您服务器上的图像路径。

【讨论】：

是的，完全正确。如果您查看图像预览的src，您会看到它位于 dondedportes.es 服务器上。