Javascript 图像上传按钮div

如何将id为“uploadWrapper”的div从这里变成一个可以上传图像的按钮-基本上与

的操作相同。提前谢谢

编辑-由于收到答复

---

当有人上传图像时，如何在蓝色背景的div处显示图像预览，请参见此

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

您可以通过使

不可见但在按钮上显示，这样当用户单击“按钮”时，他们实际上是在单击

输入

更新：

---

在回答第二个问题时，要预览图像，您需要将其发布到服务器上，然后将您的

img

的

src

指向服务器上的图像路径。

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

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

---

Plupload事件允许您连接到ajax文件上载过程中可能发生的事件，并处理上载信息。有关可能获得的响应数据的示例，请参阅本页：

您可以获得如下响应数据：

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

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

获得这些数据后，可以挂接到其中并切换图像，操作如下（使用jQuery）：

检查这把小提琴：

---

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

请参阅我的答案，其中包含如何实现适当效果的代码示例和演示。Plupload允许您将图像上传到服务器上，并获得备份已加载的图像位置，您可以在页面上的任何位置显示该位置。我看不出如何在不使用PluploadWith reloading重新加载的情况下预览图像？您的意思是不重新加载吗？抱歉，已编辑。示例：是的，完全正确。如果查看图像预览的

src

，您将看到它位于DondePortes.es服务器上。使用Plupload非常智能，因为它允许您以非常简单的方式支持文件上传，同时支持多种浏览器。：）这在IE8中不起作用。它只显示了浏览按钮的最右边缘。。好。。让我们说-1是不必要的：）

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