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

2016/12 01 14:12
此文章不得转载,如有需要请联系网站管理员。

一度的温暖,一百度的爱情,来自于www.ys3399.com的点点滴滴

百度了都是js获取途径。。。 几个题目,input file控件选择了文件后能否曾经将文件保管到客户端阅读器?如安在js中获取文件内容? 需求是,我点击上传文件控件的按钮,翻开文件后,可以直接将文件内容表现到下面一个div中。 这个服从无需经当时台处理

顺手写了个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/

文件上传后是保管在背景的,在前台没法获取内容,你可上传告成后通当时台读取内容前往到前台表现出来

可以用jquery控件么?
dropzone应该能完成你的要求,你可以看看~

或许如许,我的完成办法
js办法

        // 下面用于图片上传预览服从
        function setImagePreviewavalue {
            var docObj=document.getElementById"doc";
            if$"#doc".val==""{
                return false;
            }
            // 判别图片大小
            ifdocObj.files &&docObj.files[0]{
                var file_size = docObj.files[0].size;
                iffile_size/1024 > 1024{
                    alert"图片大于1M,请紧缩后再次上传。";
                    $"#doc".val"";
                    return false;
                }
            }
            var imgObjPreview=document.getElementById"preview";
            ifdocObj.files &&docObj.files[0]{
                // 火狐下,直接设img属性
                imgObjPreview.style.width = 110px;
                imgObjPreview.style.height = 130px;
                // 火狐7以上版本不克不及用下面的getAsDataURL方法获取,需求一下方法
                imgObjPreview.src = window.URL.createObjectURLdocObj.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.AlphaImageLoadersizingMethod=scale";
                    localImagId.filters.item"DXImageTransform.Microsoft.AlphaImageLoader".src = imgSrc;
                }catche{
                    alert"您上传的图片款式不精确,请重新选择!";
                    return false;
                }
                imgObjPreview.style.display = none;
                document.selection.empty;
            }
            return true;
        }

jsp页面

                       <div id="imgdiv" 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;">
                       </div>

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

百度出的 Webuploader 可以完成
http://fex.baidu.com/webuploa…图片上传

翻开就可以看到

  • 支持图片紧缩

  • 支持图片预览

  • 支持上传进度

  • 支持拖放文件上传

  • 支持多文件上传

  • 中文

  • 支持手机/IE6

(看完/读完)这篇文章有何感想! 来看看www.ys3399.com是怎么评论的吧!

--转载请注明: ys3399盈丰国际官网_www.ys3399.com_ys3399盈丰国际官网网址 » 客户端实现文件图片上传;如何在js中获取文件内容? 点击上传文件控件的按钮,打开文件后,能够直接将文件内容显示到下面一个div中

发表评论

(必填)