移动端 js 实现图片上传预览

方法一：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试页面</title>
        <script type="text/javascript">
        //图片预览功能
            function previewImage(file, imgNum)
            {
                var MAXWIDTH = 200;
                var MAXHEIGHT = 200;
                var div = document.getElementById(\'preview\' + imgNum);
                if (file.files && file.files[0])
                {
                    div.innerHTML = \'<img id=imghead\' + imgNum + \'>\';
                    var img = document.getElementById(\'imghead\' + imgNum + \'\');
                    img.onload = function() {
                        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                        img.width = rect.width;
                        img.height = rect.height;
        //         img.style.marginLeft = rect.left+\'px\';
                        img.style.marginTop = rect.top + \'px\';
                    }
                    var reader = new FileReader();
                    reader.onload = function(evt) {
                        img.src = evt.target.result;
                    }
                    reader.readAsDataURL(file.files[0]);
                }
                else //
                {
                    var sFilter = \'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="\';
                    file.select();
                    var src = document.selection.createRange().text;
                    div.innerHTML = \'<img id=imghead\' + imgNum + \'>\';
                    var img = document.getElementById(\'imghead2\');
                    img.filters.item(\'DXImageTransform.Microsoft.AlphaImageLoader\').src = src;
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    status = (\'rect:\' + rect.top + \',\' + rect.left + \',\' + rect.width + \',\' + rect.height);
                    div.innerHTML = "<div id=divhead" + imgNum + " style=\'width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"\'></div>";
                }
            }
            function clacImgZoomParam(maxWidth, maxHeight, width, height) {
                var param = {top: 0, left: 0, width: width, height: height};
                if (width > maxWidth || height > maxHeight)
                {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;

                    if (rateWidth > rateHeight)
                    {
                        param.width = maxWidth;
                        param.height = Math.round(height / rateWidth);
                    } else
                    {
                        param.width = Math.round(width / rateHeight);
                        param.height = maxHeight;
                    }
                }
                param.left = Math.round((maxWidth - param.width) / 2);
                param.top = Math.round((maxHeight - param.height) / 2);
                return param;
            }
        </script>
    </head>

    <body>
        <div class="yanzRight">
            <input type="file" value="打开摄像头" title="摄像头" capture="camera" accept="image/*" onchange="previewImage(this, 5)" id="cameraInput">
                <input style="margin-top:5px;float: left;" id="st18" name="evidence" onchange="previewImage(this, 5)" type="file"/>
                <span class="dui" id="imgOrder_dui" style="display: none;"></span>
        </div>
        <div id="preview5" style="margin-left:150px;clear:both; padding-top:15px;">
            <img src="" alt="" id="imghead5" height="200" width="200" style="display:none;"/>
        </div>
    </body>
</html>

方法二：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>测试页面</title>
        <script type="text/javascript">
            //下面用于多图片上传预览功能
            function setImagePreviews(avalue) {
                var docObj = document.getElementById("doc");
                var dd = document.getElementById("dd");
                dd.innerHTML = "";
                var fileList = docObj.files;
                for (var i = 0; i < fileList.length; i++) {
                    dd.innerHTML += "<div style=\'float:left\' > <img id=\'img" + i + "\'  /> </div>";
                    var imgObjPreview = document.getElementById("img" + i);
                    if (docObj.files && docObj.files[i]) {
                        //火狐下，直接设img属性
                        imgObjPreview.style.display = \'block\';
                        imgObjPreview.style.width = \'150px\';
                        imgObjPreview.style.height = \'180px\';
                        //imgObjPreview.src = docObj.files[0].getAsDataURL();
                        //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                        imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]);
                    }
                    else {
                        //IE下，使用滤镜
                        docObj.select();
                        var imgSrc = document.selection.createRange().text;
                        alert(imgSrc)
                        var localImagId = document.getElementById("img" + i);
                        //必须设置初始大小
                        localImagId.style.width = "150px";
                        localImagId.style.height = "180px";
                        //图片异常的捕捉，防止用户修改后缀来伪造图片
                        try {
                            localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                            localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                        }
                        catch (e) {
                            alert("您上传的图片格式不正确，请重新选择!");
                            return false;
                        }
                        imgObjPreview.style.display = \'none\';
                        document.selection.empty();
                    }
                }
                return true;
            }
        </script>
    </head>
    <body>
        <div style="margin :0px auto; width:990px;">
            <input type="file"  name="file" id="doc" multiple="multiple"  style="width:150px;" onchange="javascript:setImagePreviews();" accept="image/*" />
            <div id="dd" style=" width:990px;"></div>
        </div>
    </body>
</html>