JavaScrip 原生多文件上传及预览 兼容多浏览器

html代码块

<div class="container">
<label>请选择一个图像文件:</label>
<input type="file" id="file_input" multiple/>
<div class="img-box"></div>
</div>

JavaScript代码块,需要引入jQuery

$("[type='file']").change(function() {
$.each(this.files,function(key,value){
$('.img-box').append('<img height="200px" src="'+getObjectURL(value)+'"/>');
//console.log(getObjectURL(value));
});
}); //获取文件地址,显示预览用
var getObjectURL = function(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
};

JavaScrip 原生多文件上传及预览 兼容多浏览器的更多相关文章

  1. form表单系列中文件上传及预览

    文件上传及预览 Form提交 Ajax 上传文件 时机: 如果发送的[文件]:->iframe, jQurey(),伪Ajax 预览 import os img_path = os.path.j ...

  2. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  3. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  4. servlet实现文件上传,预览,下载和删除

      一.准备工作 1.1 文件上传插件:uploadify: 1.2 文件上传所需jar包:commons-fileupload-1.3.1.jar和commons-io-2.2.jar 1.3 将数 ...

  5. form里面文件上传并预览

    其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的 ...

  6. Django的文件上传以及预览、存储

    思路: 文件上传通过前端的input标签,input设置display:none属性. 内容显示需要让前端通过<img>标签读取图片内容,可以通过<label>标签连接< ...

  7. CSS自定义文件上传按钮样式,兼容主流浏览器

    解决办法:使用text文本框及a链接模拟文件上传按钮,并且把文件上传按钮放在他们上面,并且文件上传按钮显示透明.​1.图片​​2. [代码][HTML]代码 <div class="b ...

  8. 支持多文件上传,预览,拖拽,基于bootstra的上传插件fileinput 的ajax异步上传

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

  9. 支持多文件上传,预览,拖拽,基于bootstrap的上传插件fileinput 的ajax异步上传(转载)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="stylesheet"&g ...

随机推荐

  1. Martin Fowler’s Active Record design pattern.

    P of EAA: Active Record https://www.martinfowler.com/eaaCatalog/activeRecord.html Active Record An o ...

  2. Laravel 出现"RuntimeException inEncrypter.php line 43: The only supported ciphers are AES-128-CBC and AES-256-CBC with the correct key lengths."问题的解决办法

    如果输入命令:php artisan key:generate 还是报错 那就要从别的项目里复制一个key到.env中,然后再运行命令:composer update和php artisan key: ...

  3. Python 学习之旅

    流程图 第一章  Python简介 第二章  Python基础 第三章  流程控制 第四章  字符编码 第五章  文件处理 第六章  函数 第七章 模块与包 第八章 面向对象 第九章 异常处理 第十章 ...

  4. Thrift官方安装手册(译)

    本篇是Thrift官网安装文档的翻译,原地址点击这里.Thrift之前是不支持Windows的.但是似乎0.9版本以后已经支持Window了.介绍了Thrift安装的环境要求以及在centos,Deb ...

  5. C#中时间的Ticks属性

    C#中时间的Ticks属性是一个很大的长整数,单位是 100 毫微秒.表示自 0001 年 1 月 1 日午夜 12:00:00 以来已经过的时间的以 100 毫微秒为间隔的间隔数,已经说得很清楚了, ...

  6. docker helloworld

    阿里云镜像: docker官网 docker官方安装文档 配置阿里云镜像后,重启服务,以及检测服务是否正确启动 docker version.info.--help linux帮助命令man ls 镜 ...

  7. 【后缀数组之SA数组】【真难懂啊】

    基本上一搜后缀数组网上的模板都是<后缀数组——处理字符串的有力工具>这一篇的注释,O(nlogn)的复杂度确实很强大,但对于初次接触(比如窝)的人来说理解起来也着实有些困难(比如窝就活活好 ...

  8. $SVN代码版本管理工具的使用

    SVN是一种代码版本管理工具,具有可视化的操作界面,使用简便,和git的功能类似.下面总结一下SVN的基本用法: 1.安装SVN软件,和安装一般的软件的步骤差不多,这里使用的版本是TortoiseSV ...

  9. MySQL修改管理员账户密码

    报错提示:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)MySQL代理报错提示: ...

  10. mysql 触发器 存储过程 java调用

    触发器和存储过程是为了提高SQL的运行效率. SQL语句先编译.后执行,而触发器与存储过程都会提前预编译完成,且只编译一次,供反复调用. 随着时代的进步,硬件与带宽的提升,触发器和存储过程提升效率并不 ...