如何以长格式预览图像答案

【问题标题】：How to preview a image in long form如何以长格式预览图像
【发布时间】：2012-02-04 13:32:03
【问题描述】：

我想在以具有名称、年龄等其他字段的表单上传图像之前先预览图像。我尝试了 ajax 解决方案。该代码可以独立运行。但是当我将代码放入表单时它不起作用。请帮助我。

代码如下：通过 Ajax 进行图像预览的独立代码

 <form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>

我的表格是

<form name="iupload" action="index.php" method="post" >
Name <input type="text" name="myname" ><br/>
Age <input type="text" name="age" >
 <input type="file" name="photoimg" id="photoimg" />

<input type="submit" name="submit" value="upload">

<div id='preview'>
</div>

</form>

【问题讨论】：

您通常不需要，因为浏览器的文件选择对话框已经显示了文件的缩略图和信息。
@hakre 用户需要查看上传图片的预览（头像）。
您无法使用 javascript 访问 <input type="file"> 元素的值。出于安全原因，这是阻止的。所以你不能在这里创造任何东西。您可能正在寻找一些花哨的 HTML5 东西，但您的问题并没有这么说。
is it possible to preview local images before uploading them via a form? 的可能重复项

标签： php jquery ajax

【解决方案1】：

我想说的是，在所有支持File API的浏览器和旧版IE（7及以下）的浏览器中，您可以在上传之前显示本地图像。

使用 File API，您可以使用 window.URL.createObjectURL 方法获取本地 blob。 IE8 beta 引入了“fakefile”附加功能以隐藏本地文件 URL，以修复安全问题，如 here 所述。但在旧版本中，您应该能够“利用”这个安全漏洞。

这样的事情可以工作（fiddle）：

$('form input[type=file]').change(function() {
    var src;
    if ('files' in this) { // File API supported (webkit/FF)
        var obj = this.files[0];
        src = window.URL ?
            window.URL.createObjectURL(obj) :
            window.webkitURL.createObjectURL(obj);
    } else {
        if (/fake/.test(this.value)) {
            // fallback to whatever (IE8, IE9)
        } else {
            src = this.value; // exploits the IE security hole
        }
    }
    $(new Image()).attr('src',src).appendTo('body'); // the local image!
});

【讨论】：

【解决方案2】：

您是否尝试过其他 AJAX 上传插件？我亲自尝试过这个，它对我有用。

http://valums.com/ajax-upload/

这里有另一个关于如何使用它的教程：

http://css-tricks.com/ajax-image-uploading/

【讨论】：

【解决方案3】：

您无法在浏览器中预览本地图像。浏览器无权访问本地文件系统。您需要使用 Flash、Java 或 Active-X 插件来执行此操作

【讨论】：

请提供一些参考，我认为我们可以通过 ajax ，php 和 js 做到这一点
如果浏览器可以访问本地文件系统，那将是一个巨大的安全漏洞。我们会有恶意页面窃取我们的文件。