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 相关文章推荐
动态调用CSS文件的JS代码
Jul 29 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
微信小程序如何刷新当前界面的实现方法
Jun 07 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
js实现盒子拖拽动画效果
Aug 09 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
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
php防止sql注入的方法详解
2017/02/20 PHP
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jQuery 获取兄弟元素的几种不错方法
2014/05/23 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
[05:46]DOTA2英雄梦之声_第18期_陈
2014/06/20 DOTA
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
Python读取sqlite数据库文件的方法分析
2017/08/07 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
python重要函数eval多种用法解析
2020/01/14 Python
python无序链表删除重复项的方法
2020/01/17 Python
Python定时任务APScheduler原理及实例解析
2020/05/30 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
python中如何设置代码自动提示
2020/07/15 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
教师节演讲稿
2014/05/06 职场文书
酒店节能减排方案
2014/05/26 职场文书
标准毕业生自荐信
2014/06/24 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
2015年新教师工作总结
2015/04/28 职场文书
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL
mysql字段为NULL索引是否会失效实例详解
2022/05/30 MySQL