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 相关文章推荐
JS 图片缩放效果代码
Jun 09 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
js中一个函数获取另一个函数返回值问题探讨
Nov 21 Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
Angular 容器部署的方法
Apr 17 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
vue 解决provide和inject响应的问题
Nov 12 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
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
jQuery获得包含margin的outerWidth和outerHeight的方法
2015/03/25 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
详解Vue.js 2.0 如何使用axios
2017/04/21 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
js使用cookie实现记住用户名功能示例
2019/06/13 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[05:17]DOTA2誓师:今天我们在这里 明天TI4等我!
2014/03/26 DOTA
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
python发送arp欺骗攻击代码分析
2014/01/16 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python 3.6.2 安装配置方法图文教程
2018/09/18 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Python弹出输入框并获取输入值的实例
2019/06/18 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
wxPython色环电阻计算器
2019/11/18 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
使用Python实现音频双通道分离
2020/12/25 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
忠诚教育心得体会
2014/09/03 职场文书
董事长开业致辞
2015/07/29 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang