各位大哥，请问如何实现类似手机微博上传图片，即时显示缩略图后台后，覆盖input file - JavaScript论坛

已结贴√ 问题点数：20 回复次数：1

各位大哥，请问如何实现类似手机微博上传图片，即时显示缩略图后台后，覆盖input file

各位大哥，请问如何实现类似手机微博上传图片，即时显示缩略图后台后，覆盖input file控件。限制3张图片就可以了。最好能兼容大部分的浏览器。附上一段我自己修改的代码（显示有问题），我是菜鸟一个，新手上路请大哥们帮忙看看应该怎么修改，谢谢了！！！

想实现的效果如下图(http://m.)

图片附件: 游客没有浏览图片的权限，请登录或注册

代码如下：

<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
oFReader = new FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

oFReader.onload = function (oFREvent) {
    if (document.getElementById("photo1").files.length === 0) {document.getElementById("uploadPreview1").src = oFREvent.target.result;}
    if (document.getElementById("photo2").files.length === 0) {document.getElementById("uploadPreview2").src = oFREvent.target.result;}
     if (document.getElementById("photo3").files.length === 0) {document.getElementById("uploadPreview3").src = oFREvent.target.result;}
};

function loadImageFile(id){
    if (id == 1) {
        if (document.getElementById("photo1").files.length === 0) {document.getElementById("uploadPreview1").src = oFREvent.target.result;}
        var oFile = document.getElementById("photo1").files[0];
        if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(oFile);
    }else if (id == 2) {
        if (document.getElementById("photo2").files.length === 0) {document.getElementById("uploadPreview2").src = oFREvent.target.result;}
        var oFile = document.getElementById("photo2").files[0];
        if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(oFile);

    }else if (id == 3) {
        if (document.getElementById("photo3").files.length === 0) {document.getElementById("uploadPreview3").src = oFREvent.target.result;}
        var oFile = document.getElementById("photo3").files[0];
        if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
        oFReader.readAsDataURL(oFile);

    }
}
</script>
</head>

<body onload="loadImageFile(id);">
  <form name="commentForm">
        <div style="position: relative;float: left;margin-right: 10px;">
            <img id="uploadPreview1" style="z-index:1; width: 100px; height: 100px;" alt="图片预览1" />
            <input type="file" id="photo1" size="28" name="photo1" onchange="loadImageFile(1);" accept="image/*" capture="camera" style="z-index:2; width: 100px;height: 100px;position: absolute;bottom: 0px;left: 0px;opacity: 0;">
        </div>
        <div style="position: relative;float: left;margin-right: 10px;">
            <img id="uploadPreview2" style="z-index:1; width: 100px; height: 100px;" alt="图片预览2" />
            <input type="file" id="photo2" size="28" name="photo1" onchange="loadImageFile(2);" accept="image/*" capture="camera" style="z-index:2; width: 100px;height: 100px;position: absolute;bottom: 0px;left: 0px;opacity: 0;">
        </div>
        <div style="position: relative;float: left;margin-right: 10px;">
            <img id="uploadPreview3" style="z-index:1; width: 100px; height: 100px;" alt="图片预览3" />
            <input type="file" id="photo3" size="28" name="photo1" onchange="loadImageFile(3);" accept="image/*" capture="camera" style="z-index:2; width: 100px;height: 100px;position: absolute;bottom: 0px;left: 0px;opacity: 0;">
        </div>
  </form>
</body>
</html>

[ 本帖最后由 sailongh 于 2015-3-26 18:16 编辑 ]