在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮（自定义自己的上传按钮 如:img）:

1.将自定义上传按钮上方添加 input file 框，实现input实现透明处理。

2.对自定义上传按钮添加事件。隐藏真正input框。用事件来触发：

function imgBtn(){

return document.getElementById("inputid").click();

}

现在浏览器基本都支持H5 。针对H5的代码：

var docObj=document.getElementById("inputid");//file文本框id

var imgObjPreview=document.getElementById("imgId");//预显示的图片

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

针对ie的代码：

docObj.select();

docObj.blur();

var localImagId = document.getElementById("divid or imgid");

var imgSrc = docObj.createTextRange().text;

try{

   localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";

   localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;

}

catch(e)

{

   console.log(e);

   alert("您上传的图片格式不正确，请重新选择!");

   return false;

}
很多大型网站上都使用到了这个滤镜，它是IE滤镜的一种，其主要作用就是对图片进行透明处理。虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片，但是就IE5-IE6而言还是有一定的意义。
语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
　　enabled :　可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false （这个基本可以忽略，被禁止了那还搞什么……）

　　　　　true :　 默认值。滤镜激活。

　　　　　false :　 滤镜被禁止。

   sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。（可以无视这行说明，关键是下面的参数。一般来说单独图片且精度比较高的使用scale比较合适，除非您把所有的要用到的图片都放到一张图那就当我没说过。但是那样做的话这张png图片的体积估计不会很小。另，这个滤镜只是加载，其填充方式还是可以受CSS控制的。）

　　　　　crop :　剪切图片以适应对象尺寸。

　　　　　image :　默认值。增大或减小对象的尺寸边界以适应图片的尺寸。

　　　　　scale :　缩放图片以适应对象的尺寸边界。

　　src :　必选项。字符串(String)。（指定图片的路径。要注意的是这个路径是指加载滤镜的页面相对于图片的路径而不是css文件相对于图片的路径。这跟一般的图片加载有区别。）
使用实例：
.login_logo {

　　background-image: url(../Image/login_logo.png);

　　_background-image: none;

　　_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/Public/Image/login_logo.png');　　

}

上面那样预览,图片的临时格式是这样的:blob:http://XXX.com/3fdc2df8-bb2d-479a-bb45-796f976d0b27

参考: https://www.cnblogs.com/hzxy-blog/p/6410204.html

上面怎么点击浏览按钮后,图片显示在网页中了,这个用到了, 浏览按钮的各个事件 可以参考下...

<body>

<input type="file" id="input">

</body>

<script>

    document.getElementById("input").addEventListener("focus",function () {

        console.log("focus");

    });  

    document.getElementById("input").addEventListener("mousedown",function () {

        console.log("mousedown");

    });  

    document.getElementById("input").addEventListener("mouseup",function () {

        console.log("mouseup");

    });  

    document.getElementById("input").addEventListener("input",function () {

        console.log("input");

    });  

    document.getElementById("input").addEventListener("change",function () {

        console.log("change");

    });  

    document.getElementById("input").addEventListener("blur",function () {

        console.log("blur");

    });  

    document.getElementById("input").addEventListener("click",function () {

        console.log("click");

    });  

</script>

onchange可以这样写:(本地就可以浏览要上传的文件了)

var docObj=document.getElementById("uploaderInput");//获取input=file 按钮对象

var imgObjPreview=document.getElementById("imgId");//获取一个img的对象

imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);//把file选中的图片临时地址复制给img的src-- 很容易理解

//和上面没关系--这个直接把一个li元素包着图片显示,

let bg = window.URL.createObjectURL(docObj.files[0]);//ES6 定义一个变量

let el = `<li class="weui-uploader__file" style="background-image:url(${bg})"></li>`;//ES6 新特性,模板字符串替换变量, 原来JavaScript需要用+号拼接,很麻烦...

或一个现成写法:

function clickup(obj1,obj2)

{

    //获取点击的文本框

    var file = document.getElementById("uploaderInput");

    //存放图片的父级元素

    var imgContainer = document.getElementsByClassName(obj1)[0];

    //获取的图片文件

    var fileList = file.files;

    //文本框的父级元素

    var input = document.getElementsByClassName(obj2)[0];

    var imgArr = [];

    //遍历获取到得图片文件

    for (var i = 0; i < fileList.length; i++) {

        let imgUrl = window.URL.createObjectURL(file.files[i]);

        alert(imgUrl);

        $("#uploaderFiles").append(`<li class="weui-uploader__file" style="background-image:url(${imgUrl})"></li>`);

        //imgArr.push(imgUrl);

        //var img = document.createElement("img");

        //img.setAttribute("src", imgArr[i]);

}

web 图片上传实现本地预览

也可以这样 :

html之file标签 --- 图片上传前预览 -- FileReader

https://www.cnblogs.com/tandaxia/p/5125275.html

web 图片上传实现本地预览的更多相关文章

  1. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. jquery实现图片上传前本地预览功能

    HTML <img id="pic" src="" > <input id="upload" name="fil ...

  3. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  4. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  5. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  6. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  7. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

  8. file图片上传之前先预览

    链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...

  9. js实现图片上传后即时预览

    //关于FileReader对象 http://blog.csdn.net/zk437092645/article/details/8745647 <!DOCTYPE html> < ...

随机推荐

  1. Linux命令之free

    free [选项] 显示系统中未使用和使用的内存情况,包括物理内存.交换区内存(swap)和内核缓冲区内存.共享内存将被忽略. (1).选项 -b,-k,-m,-g 以Byte,KB,MB,GB为单位 ...

  2. 记录（Record）

    记录有可以被称为行(Row),可以通俗的认为它是数据表中的一行数据.以员工表为例,一个公司的员工表中的数据是这样的: 这里每一行数据就代表一个员工的资料,这样的一行数据就叫做一条记录.表是由行和列组成 ...

  3. 简单的INSERT语句

    INSERT INTO 语句用来向数据表中插入数据,比如执行下面的语句就可以向T_Person表中插入一条数据: INSERT INTO T_Person(FName,FAge,FRemark) VA ...

  4. hexo 的错误

    错误如下 Connection to github.com closed by remote host. fatal: The remote end hung up unexpectedly erro ...

  5. Robot Framework与Web界面自动化测试：简单例子

    假设环境已经搭建好了.这里用RIDE( Robot Framework Test Data Editor)工具来编写用例.下面我们对Robot Framework简称rf. 我们先考虑下一个最基本的登 ...

  6. Servlet规范简介

    引言 Web 框架一般是通过一个 Servlet 提供统一的请求入口,将指定的资源映射到这个 servlet, 在这个 servlet 中进行框架的初始化配置,访问 Web 页面中的数据,进行逻辑处理 ...

  7. 【动态规划】【记忆化搜索】CODEVS 1011 数的计算 2001年NOIP全国联赛普及组

    设答案为f(n),我们显然可以暴力地递归求解: f(n)=f(1)+f(2)+……+f(n/2). 但是n=1000,显然会超时. 考虑状态最多可能会有n种,经过大量的重复计算,所以可以记忆下来,减少 ...

  8. 一年的天数 Exercise06_16

    /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:一年的天数 * */ public class Exercise06_16 { public static void main ...

  9. 使用Arraylist产生不重复的随机数

    在Java中主要有两种方法来获取随机数,分别是通过Math.random方法和Random类获得随机数,不过Math.random方法其实也是通过生成一个Random类实例,然后再生成随机数的,也就是 ...

  10. C#中Math的使用总结

    1.向上进位取整.Math.Ceiling 例如: Math.Ceiling(32.6)=33; Math.Ceiling(32.0)=32; 2.向下舍位取整.Math.Floor 例如: Math ...