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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
window.location.hash 使用说明
Nov 08 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
基于Jquery实现的一个图片滚动切换
Jun 21 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
javascript用函数实现对象的方法
May 14 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
r.js来合并压缩css文件的示例
Apr 26 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
PHPCMS的使用小结
2010/09/20 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
Alliance vs AM BO3 第二场2.13
2021/03/10 DOTA
JS 分号引起的一段调试问题
2009/06/18 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
2013/03/19 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
js实现日历
2020/11/07 Javascript
python按照多个字符对字符串进行分割的方法
2015/03/17 Python
python将文本转换成图片输出的方法
2015/04/28 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
静心口服夜广告词
2014/03/20 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
广告学专业求职信
2014/06/19 职场文书
体育个人工作总结
2015/02/09 职场文书
看上去很美观后感
2015/06/10 职场文书
防溺水主题班会教案
2015/08/12 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
Python 语言实现六大查找算法
2021/06/30 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python