图片上传按钮div

Question

如何将ID为“uploadWrapper”的div从此jsFiddle转换为可上传图像的按钮 - 基本上与<input type="file">相同。提前谢谢。

编辑 - 由于收到的答案

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

Answer 1

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

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

Answer 2

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

您可以通过使<input type="file" />不可见但通过按钮来执行此操作，这样当用户点击“按钮”时，他们实际上是点击了input。

<强>更新

在回答第二个问题时，要预览图片，您需要将其发布到服务器，然后将img的{​​{1}}指向服务器上的图片路径。

Answer 3

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

我建议使用第三方文件上传插件，例如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);
}