javascript结合fileReader 实现上传图片


Posted in Javascript onJanuary 30, 2015

关于File API这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过FileReader接口,我们可以异步地将文件内容加载到内存中,赋予某个js变量。

function getImgSrc(target, callback) {

    if (window.FileReader) {

        var oPreviewImg = null, oFReader = new window.FileReader();

        oFReader.onload = function (oFREvent) {

            oPreviewImg = new Image();

            var type = target.files[0].type.split("/")[1];

            var src = oFREvent.target.result;

            oPreviewImg.src = src;

            if (typeof callback == "function") {

                callback(oPreviewImg, target, type, src);

            }

            return oPreviewImg.src;

        };

        return (function () {

            var aFiles = target.files;

            if (aFiles.length === 0) {

                return;

            }

            if (!IsImgType(aFiles[0].type)) {

                alert("You must select a valid image file!");

                return;

            }

            if (aFiles[0].size > 1024 * 1024) {

                target.value = "";

                alert('Please upload image file size less than 1M.');

                return;

            }

            oFReader.readAsDataURL(aFiles[0]);

        })();

    }

    if (navigator.appName === "Microsoft Internet Explorer") {

        return (function () {

            document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = target.value;

        })();

    }

}

以上就是javascript结合fileReader 实现上传图片的关键性代码了,小伙伴们喜欢吗?

Javascript 相关文章推荐
IE本地存储userdata的一个bug说明
Jul 01 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
在微信小程序中使用vant的方法
Jun 07 Javascript
Vuex实现购物车小功能
Aug 17 Javascript
使用JavaScript+canvas实现图片裁剪
Jan 30 #Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 #Javascript
项目中常用的JS方法整理
Jan 30 #Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 #Javascript
jquery实现拖拽调整Div大小
Jan 30 #Javascript
jQuery中$.click()无效问题分析
Jan 29 #Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 #Javascript
You might like
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jquery获取radio值(单选组radio)
2014/10/16 Javascript
AngularJS入门教程之双向绑定详解
2016/08/18 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
详解如何让Express支持async/await
2017/10/09 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python交互界面的退出方法
2019/02/16 Python
python按行读取文件并找出其中指定字符串
2019/08/08 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
总经理秘书工作职责
2013/12/26 职场文书
会计学自我鉴定
2014/02/06 职场文书
一份创业计划书范文
2014/02/08 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2014年纪委工作总结
2014/12/05 职场文书
房产公证书样本
2015/01/23 职场文书
小浪底导游词
2015/02/12 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
2015年英语教师工作总结
2015/05/20 职场文书