手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript结合fileReader 实现上传图片
javascript结合fileReader 实现上传图片
摘要:关于FileAPI这里就不详细解释了,小伙伴们自行度娘吧,来我们就要利用文件句柄来读取文件内容,这是通过FileReader来实现的,通过F...

关于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结合fileReader 实现上传图片】相关文章:

javascript下使用Promise封装FileReader

javascript模拟评分控件实现方法

javascript实现炫酷的拖动分页

javascript制作的滑动图片菜单

javascript实现动态改变层大小的方法

javascript实现带下拉子菜单的导航菜单效果

javascript瀑布流式图片懒加载实例

javascript实现控制的多级下拉菜单

javascript实现table表格隔行变色的方法

JavaScript实现鼠标拖动效果的方法

精品推荐
分类导航