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. NX二次开发-UFUN工程图更新视图UF_DRAW_update_one_view

    NX9+VS2012 #include <uf.h> #include <uf_draw.h> #include <uf_obj.h> #include <u ...

  2. PDF文档转PNG图片 c++(转载)

    PDF文档转PNG图片 c++,例子是转载的,忘记出处了.被我收集起来了. 链接:https://pan.baidu.com/s/1iuxDHibQnvx0UYJ5m25NAg 密码:5o0c

  3. RoHS

    RoHS是<电气.电子设备中限制使用某些有害物质指令>(the Restriction of the use of certain hazardous substances in elec ...

  4. Number Sequence /// oj21456

    题目大意: 有一组规律数 the first 80 digits of the sequence are as follows: 1 12 123 1234 12345 123456 1234567 ...

  5. 9.ActiveMQ理论

    一.首先说下什么是消息队列? 1.消息队列是在消息的传输过程中保存消息的容器. 二.为什么要用到消息队列? 主要原因是由于在高并发环境下,由于来不及同步处理,请求往往会发生堵塞,比如说,大量的inse ...

  6. Impala系统架构

  7. Task ProgressBar模拟现实完成后显示TextBox

    private async void Form1_Load(object sender, EventArgs e) { progressBar1.Maximum = ; progressBar2.Ma ...

  8. C++ 系列:iostream 的用途与局限

    转载自http://www.cnblogs.com/Solstice/archive/2011/07/17/2108715.html 本文主要考虑 x86 Linux 平台,不考虑跨平台的可移植性,也 ...

  9. [JZOJ6271] 2019.8.4【NOIP提高组A】锻造

    题目 题目大意 武器的每个级别有固定的两种属性\(b_i\)和\(c_i\) 可以用\(a\)的代价得到一把\(0\)级的武器. 可以将\(x\)级武器和\(y=\max(x-1,0)\)级武器融合锻 ...

  10. python 随便笔记

    1 判断字符串中是否有数字 i.isdigit()==True else False #判断是否是数字i.isalpha()==True else False #判断是否是字母 i.isspace() ...