javascript - 客户端实现文件图片上传；如何在js中获取文件内容？ 点击上传文件控件的按钮，打开文件后，能够直接将文件内容显示到下面一个div中

Question

百度了都是js获取路径。。。 几个问题，input file控件选择了文件后是否已经将文件保存到客户端浏览器？如何在js中获取文件内容？ 需求是，我点击上传文件控件的按钮，打开文件后，能够直接将文件内容显示到下面一个p中。 这个功能无需经过后台处理

Answer 1

顺手写了个demo，用的是HTML5 DOM新增的File API。

更新歌文档，mdn简直就是宝库啊，啥都有
https://developer.mozilla.org...…E7%94%A8%E5%AF%B9%E8%B1%A1URL%E6%9D%A5%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87

点开看代码和预览效果
https://jsfiddle.net/sukx1j66/

Answer 2

文件上传后是保存在后台的，在前台没法获取内容，你可上传成功后通过后台读取内容返回到前台显示出来

Answer 3

可以用jquery控件么？
dropzone应该能实现你的要求，你可以看看~

或者这样，我的实现方法
js方法

        // 下面用于图片上传预览功能
        function setImagePreview(avalue) {
            var docObj=document.getElementById("doc");
            if($("#doc").val()==""){
                return false;
            }
            // 判断图片大小
            if(docObj.files &&docObj.files[0]){
                var file_size = docObj.files[0].size;
                if(file_size/1024 > 1024){
                    alert("图片大于1M,请压缩后再次上传。");
                    $("#doc").val("");
                    return false;
                }
            }
            var imgObjPreview=document.getElementById("preview");
            if(docObj.files &&docObj.files[0]){
                // 火狐下，直接设img属性
                imgObjPreview.style.width = '110px';
                imgObjPreview.style.height = '130px';
                // 火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }else{
                // IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("localImag");
                // 必须设置初始大小
                localImagId.style.width = "110px";
                localImagId.style.height = "130px";
                // 图片异常的捕捉，防止用户修改后缀来伪造图片
                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;
        }

jsp页面

                       <p id="imgp" style="text-align:center;">
                           <img id="preview" alt="头像" src="<%=basePath%>/getUserHeadImg.action?rybh=<s:property value='ryxxVo.rybh'/>" onerror="this.src='images/user_head.png'" style="width: 110px; height: 130px;"><br>
                           <input type="file" id="doc" name="file" value="上传头像" onchange="javascript:setImagePreview();">
                       </p>

从自己代码里摘出来的，格式有点乱，凑活看吧

Answer 4

百度出的 Webuploader 可以实现
http://fex.baidu.com/webuploa...图片上传

打开就可以看到

• 支持图片压缩

• 支持图片预览

• 支持上传进度

• 支持拖放文件上传

• 支持多文件上传

• 中文

• 支持手机/IE6