HTML+Jquery实现多图片上传预览功能
HTML:使用input的onchange事件,它一改变就触发事件
<p id="p3">
<input name="File" onchange="update()" accept="image/png,image/gif,image/jpg,image/jpeg" id="FS" type="file" multiple>
</p>
JS:这是效果
function update() {
var Fs=$("#FS")[0];
for (var i=0; i<Fs.files.length; i++){
formData_2.append("file", Fs.files[i]);
//window.URL.createObjectURL可以用于在浏览器上预览本地图片或者视频
var div="<div style='float:left'> <img id='img"+i+"' width='70px' height='70px' src='"+window.URL.createObjectURL(Fs.files[i])+"'/> </div>"
$("#p3").after(div);
}
}

HTML+Jquery实现多图片上传预览功能的更多相关文章
- 使用ajax,结合jquery,php实现图片上传预览功能
大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...
- js实现图片上传预览功能,使用base64编码来实现
实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...
- JQ实现图片上传预览功能
<input type="file" name="img" id="test1"> <img src="&quo ...
- jquery实现本地图片上传预览和限流处理
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- js实现图片上传预览功能,使用base64编码来实现
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转
文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- html,图片上传预览,input file获取文件等相关操作
input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...
随机推荐
- 原生JS实现双向链表
1.前言 双向链表和单向链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个元素,另一个链向前一个元素,如下图所示: 从图中可以看到,双向链表中,在 ...
- Docker实战总结
>>> 目录 <<< Docker简介 Docker优势 Docker基本概念 Docker安装使用 Docker常用命令 Docker镜像构建 Docker本地仓 ...
- eclipse断点的使用---for循环举例
在很多时候,我们在学习过程中,不知道代码具体的实现过程,很好奇这个变量的值怎么就发生的变化,用好断点的使用,帮助我们更好的理解. 例子:10以内的奇数之和 package day03; public ...
- 你了解MySQL中的锁吗?
MySQL中的锁,分为全局锁.表级锁.行锁 全局锁 全局锁的意思就是,对整个数据库实例加锁,它的命令是FTWRL Flash tables with read lock 这个命令的语义是,使整个库处于 ...
- PHP判断是否关注微信公众号
PHP判断是否关注微信公众号 1 服务号直接请求这个接口https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140839 su ...
- python的基础认识
一.python的简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,Guido开始写能够解释Python语言语法的解释器.Python这个名 ...
- jsp+servlet分页查询
分页查询 减少服务器内存开销 提高用户体验 效果图 思绪图 分页显示Bean文件代码 package cn.ytmj.findlist.domain; import java.util.List; / ...
- VS 使用 :新建项目
1.文件位置不放C盘
- Serlvet之cookie和session学习
HTTP 协议 Web通信需要一种语言,就像中国人讲中文,欧美说英文,Web使用的HTTP协议,也叫超文本协议. 使用HTTP协议的人分为两类:客户端和服务端.请求资源的角色是客户端,提供资源的是服务 ...
- 通过django 速成 blog
1. 创建项目 33进入在python目录下的scripts文件后执行 django-admin.py startproject mysite 这样就生成了名为mysite ...