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];//获取文件数据 ...
随机推荐
- CAT客户端如何从Apollo中读取配置?
运行环境 以下就是这个示例的运行环境,如果版本号不一样,区别也应该不会很大,可以根据实际情况做相应调整. JDK 8 spring boot 2.0.7.RELEASE cat-client 3.0. ...
- [Flink]Flink1.6三种运行模式安装部署以及实现WordCount
前言 Flink三种运行方式:Local.Standalone.On Yarn.成功部署后分别用Scala和Java实现wordcount 环境 版本:Flink 1.6.2 集群环境:Hadoop2 ...
- JDBC向数据库中写数据
package MYSQK; import java.sql.*; /** * PreparedStatement 对象可以对sql语句进行预编译,预编译的信息会存在存储该对象中,当相同的sql语句再 ...
- ES入门宝典(详细截图版)
本文使用版本基于elasticsearch-6.4.0 1.什么是ES? 官网: https://www.elastic.co/products/elasticsearch 中文官网:https:/ ...
- [转载]2.5 UiPath循环活动Do While的介绍和使用
一.Do While的介绍 先执行循环体, 再判断条件是否满足, 如果满足, 则再次执行循环体, 直到判断条件不满足, 则跳出循环. 二.Do While在UiPath中的使用 1. 打开设计器,在设 ...
- python面试看这一篇就够了
python-面试通关宝典 有面Python开发方向的,看这一个repo就够啦? 语言特性 1.谈谈对 Python 和其他语言的区别 Python属于解释型语言,当程序运行时,是一行一行的解释,并运 ...
- activemq 的延迟队列和幂等性检查
一. 延迟消息队列 1. 在提交支付之后,可以发送一个延迟检查的队列,来主动查询用户在支付宝上的支付状态 在mq的配置/config/activeMq.xml的broker实例上配置 schedule ...
- RTX消息提醒工具设计文档
为什么要做 项目上线后,系统依然由各业务模块负责人自己维护.而后台运行的各种业务服务结果,不能及时反馈到业务负责人.而等到客户反馈时则会太被动.为了能及时发现并解决项目问题,设计了该工具. 可利用资源 ...
- BST的实现(二叉搜索树)
void Inorder(struct Tree *T); //中序 void Preorder(struct Tree *T); //前序 void Postorder(struct Tree *T ...
- 手把手教你用netty撸一个ZkClient
原文地址: https://juejin.im/post/5dd296c0e51d4508182449a6 前言 有这个想法的缘由是前一阵子突发奇想, 想尝试能不能直接利用js连接到zookeeper ...