Question

我希望在上传图像之前预览图像，其中包含其他字段，如姓名，年龄等。我已经尝试过ajax解决方案。代码工作得很好。但是，当我把代码放入表单时，它不起作用.plz帮助我。

代码如下：通过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>

Answer 1

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

Answer 2

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

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

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

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

Answer 3

我想说你可以在所有支持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!
});

如何以长格式预览图像

3 个答案: