html5出现之前如果需要上传图片预览 一般都是先上传到服务器然后远程预览

html5出现之后   有个filereader 解决了这问题

 //选中图片之后
$("#fileAddPic").on('change', function (e) {
var files = e.target.files || e.dataTransfer.files;
onSelect(files);
}) //选中图片之后
function onSelect(file) {
file = file[0]; var html = '', i = 0;
$("#preview").html('<div class="upload_loading"></div>');
var funAppendImage = function () {
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
$("#upimgBox").attr('src', e.target.result)
}
reader.readAsDataURL(file);
}
};
funAppendImage();
}

  

HTML5 上传图片预览的更多相关文章

  1. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  2. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  3. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  4. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

  5. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  6. JS 上传图片 + 预览功能(一)

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  7. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. 【小月博客】用HTML5的File API做上传图片预览功能

    前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(P ...

随机推荐

  1. 2019 IEEEXtreme 13.0 Impact Factor 影响因子

    Impact Factor 题目大意 顾名思义,求影响因子.有 n 行 json 数据,第一行为期刊信息,后面为出版商出版的文章信息.   输入输出 点击查看详细 输入: 6 {"publi ...

  2. tensorflow TypeError: Can not convert a float32 into a Tensor or Operation

    遇到这种情况可能是你的程序中有和你定义的tensor 变量重名的其他变量名字,jishi在for循环中使用了这个名字的作为临时变量也不行.tenor 变量很娇气.坑了我一晚上的时间. 比如:x = t ...

  3. css3 常用的属性

    1.伪类选择符 Pseudo-Classes Selectors Selectors选择符 CSS Version版本 Description简介 E:link CSS1 设置超链接a在未被访问前的样 ...

  4. Jmeter----函数助手参数化

    要填写开始日期和结束日期和赋值的变量名

  5. asp.net core2.0 依赖注入 AddTransient与AddScoped的区别 - 晓剑 - CSDN博客

    原文:asp.net core2.0 依赖注入 AddTransient与AddScoped的区别 - 晓剑 - CSDN博客 原文地址:http://www.tnblog.net/aojiancc2 ...

  6. 查看Linux 内核版本命令

    1.Ubuntu 查看版本命令,三种方法. 1.使用  "uname -a" 2.使用  "lsb_release -a"   3.使用  "cat ...

  7. iOS开发系列-HTTPS

    HTTPS 网景在1994年创建了HTTPS,并应用在网景导航者浏览器中. 最初,HTTPS是与SSL一起使用的:在SSL逐渐演变到TLS. HTTPS协议与HTTP协议的一些不同: http是超文本 ...

  8. Django ORM 之F、Q查询与事务

    返回ORM目录 Django ORM 内容目录 一.F.Q查询 二.事务 三.only与defer 一.F.Q查询 """ Product表中的数据: 1 橡皮 2 20 ...

  9. JS鼠标经过

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟 ...

  10. Nlog 日志框架简单教程

    安装 Nuget获取 配置寻找 会自动寻找在应用程序目录下的NLog.config(大小写敏感) 如何配置config <?xml version="1.0" encodin ...