Javascript 带预览和删除的图像上载_Javascript_Jquery_Upload

Javascript 带预览和删除的图像上载

javascript jquery

Javascript 带预览和删除的图像上载,javascript,jquery,upload,Javascript,Jquery,Upload,有以下问题，并需要关于以下脚本的答案，该脚本将在上传前预览照片。脚本来自 1）该脚本适用于Firefox，不适用于IE。如何使其适用于IE 2）它没有删除照片的方法。需要在预览照片上安装小图像“X”之类的内容，单击此“X”将删除照片。有人能提供这个解决方案吗 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.m

有以下问题，并需要关于以下脚本的答案，该脚本将在上传前预览照片。脚本来自

1）该脚本适用于Firefox，不适用于IE。如何使其适用于IE

2）它没有删除照片的方法。需要在预览照片上安装小图像“X”之类的内容，单击此“X”将删除照片。有人能提供这个解决方案吗

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#img_prev')
            .attr('src', e.target.result)
            .height(200);
        };

        reader.readAsDataURL(input.files[0]);
    }
}
</script>

<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
</html>


函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'img#u prev'）
.attr（'src'，e.target.result）
.身高（200）；
};
reader.readAsDataURL（input.files[0]）；
}
}
JS-Bin
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}

这在Internet Explorer 10以下的任何设备上都不起作用<代码>文件阅读器（）直到IE10才引入支持。。它将与Chrome7和Firefox3.6配合使用

或

在Chrome、Fx、Safari 6等浏览器上进行了测试（有人可以测试5吗？）

在XP上运行我的IE8，没有任何设置更改，但正如@Gunasekaran在本页后面提到的，您可能需要

打开工具->internet选项->安全选项卡->自定义级别-找到设置“将文件上载到服务器时包括本地目录路径”，然后单击启用


图像预览
var blank=”http://upload.wikimedia.org/wikipedia/commons/c/c0/Blank.gif";
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'img#u prev'）
.attr（'src'，e.target.result）
.身高（200）；
};
reader.readAsDataURL（input.files[0]）；
}
否则{
var img=输入值；
$（'#img_prev'）.attr（'src'，img.）.height（200）；
}
$（“#x”）.show（）.css（“右边距”、“10px”）；
}
$（文档）.ready（函数（）{
$（“#x”）。单击（函数（）{
$（“img#u prev”）.attr（“src”，空白）；
$（“#x”）.hide（）；
});
});
文章、旁白、数字、页脚、页眉、H组、，
菜单，导航，部分{显示：块；}
#x{显示：无；位置：相对；z索引：200；浮点：右}
#预览面板{显示：内联块；}


[X]

在XP上的IE8中如下所示：

我还没有实现一个更新的方法

更新如果要允许用户选择同一图像两次，则需要添加onclick以清除文件输入（onchange不会触发）

回复@user1315468的最后一次回复 IE8需要更改安全设置：

打开工具->互联网选项->安全选项卡->自定义级别找到设置“将文件上载到服务器时包含本地目录路径”，然后单击启用

更改后，您可以使用mplungjan的演示链接重新打开浏览器。

希望这有帮助。

**我已经粘贴了所有浏览器的完整工作代码

注意：有时Internet Explorer可能会阻止脚本，因此为了查看图像，请单击提示并“允许阻止的内容”。下面是工作代码**

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>


函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#previewImg”）
.attr（'src'，e.target.result）
.宽度（130）；
}
reader.readAsDataURL（input.files[0]）；
}否则{
var filename=“”；
filename=“file:\/\/”+input.value；
document.form2.previewImg.src=文件名；
document.form2.previewImg.style.width=“130px”；
}
}

文件阅读器读取图像或文件的内容听起来很棒。但是考虑到你读的文件是20MB大，读它作为DATOL将创建一个大的JS对象。如何避免这种情况？



为我工作：）你在IE上犯了什么错误？是的，你能提供更多的信息或在中发布一个例子吗？对不起，你的答案不起作用。在IE8上测试了它，但它不起作用。@user1315468我有点困惑。。。在我的回答中，我告诉过你它在IE8中不起作用。。。请参阅我添加的链接。对不起，我提供了错误的评论。有针对旧浏览器的解决方案吗？@user1315468只需谷歌快速返回此->（以前从未使用过它，但表示它支持IE8，但演示链接已失效抱歉，您的解决方案不起作用。在IE8上测试了它，但它不起作用。上载了新的演示并更新了代码。包括隐藏按钮起作用-对于我，IE8 XP，FX 10抱歉，在我的IE8上尝试了您的代码，但仍然不起作用，请参阅我的IE8的屏幕截图了解您的代码：T他预览的图片显示为一张损坏的图片。什么版本在什么平台上？-我更新了答案。Thankspreviewmg无法通过document.form2访问，除非是
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

</head>

<body>
<form name="form2">

<div>
<input type="file"  name="myFile"   id="myFile" onchange="readURL(this);"></input>
</div>

<div>
<img id="previewImg" src="#" />
</div>

</form>
<script>

function readURL(input) {

if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#previewImg')
            .attr('src', e.target.result)
            .width(130);
    }
reader.readAsDataURL(input.files[0]);

}else{
          var filename = "";
         filename = "file:\/\/"+input.value;
         document.form2.previewImg.src=filename;
         document.form2.previewImg.style.width="130px";

 }
}
 </script>   
</body>
</html>

<script type="text/javascript">
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function (e) {
            $("#imgRepresentImage").attr("src", e.target.result).width(200);
        };
        reader.readAsDataURL(input.files[0]);
    } else {
        var img = input.value;
        $("#imgRepresentImage").attr("src", img).width(200);
    }
    $("#x").text('[X]');
}
$(document).ready(function () {
    $("#x").click(function () {
        $("#imgRepresentImage").attr("src", "").width(0);
        $("#x").text('');
        $("#representImageUpload").val('');
    });
});