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实现多图片上传预览功能的更多相关文章

  1. 使用ajax,结合jquery,php实现图片上传预览功能

    大致逻辑:点击页面的file,上传图片到指定的php处理图片的文件,处理完成以后,将图片的连接地址返回,JS控制返回的数据,然后将图片动态的展示出来html代码<label> <im ...

  2. JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)

    需要解决的问题有:本地图片如何在上传前预览.编辑:最近发现这个功能很多是基于flash实现的,很多JavaScript实现的代码兼容性都很差,特别是在IE和firefox和chrome三个浏览器上不兼 ...

  3. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  4. JQ实现图片上传预览功能

    <input type="file" name="img" id="test1"> <img src="&quo ...

  5. jquery实现本地图片上传预览和限流处理

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. js实现图片上传预览功能,使用base64编码来实现

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. 12-tinyMCE文本编辑器+图片上传预览+页面倒计时自动跳转

    文本编辑器插件:1.将tinymce文件夹全部复制到webContent下2.tinymce/js目录下放 jquery等三个js文件3.语言包:tinymce/js/tinymce/langs目录下 ...

  8. js前端实现多图图片上传预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...

  9. html,图片上传预览,input file获取文件等相关操作

    input file常用方法: var obj=document.getElementById("upimage"); var file=obj.files[0];//获取文件数据 ...

随机推荐

  1. 【ASP.NET Core学习】Entity Framework Core

    这里介绍在ASP.NET Core中使用EF Core,这里数据库选的是Sql Server 如何使用Sql Server 添加模型 && 数据库迁移 查询数据 保存数据 如何使用Sq ...

  2. 如何让elemengUI中的表格组件相同内容的单元格自动合并

    1. 前言 这两天在工作中遇到这样一个需求:将某个Excel中的数据在页面上以表格形式展示出来,并且尽量保持数据层级与Excel中一致.在原始Excel文件中,对每一行相同的数据都进行了合并,使得数据 ...

  3. 『题解』Codeforces2A Winner

    Portal Portal1: Codeforces Portal2: Luogu Description The winner of the card game popular in Berland ...

  4. Docker 资源 | 官方文件

    Docker资源 Docker官方英文资源: docker官网:http://www.docker.com Docker windows入门:https://docs.docker.com/windo ...

  5. 基于docker搭建Jenkins+Gitlab+Harbor+Rancher架构实现CI/CD操作(续)---Harbor的安装

    前期安装文档:https://www.cnblogs.com/lq-93/p/11828626.html Harbor的作用:     开发提交代码至gitlab容器中,Jenkins拉取代码构建镜像 ...

  6. 支付宝小程序和微信小程序的区别(部分)

    支付宝小程序和微信小程序之间的互相转换 1.首先是文件名 微信小程序 wxss ------ 支付宝小程序 acss 微信小程序 wxml ------ 支付宝小程序 axml 2.调用方法前缀 微信 ...

  7. Proxy动态代理-增强方法

    增强对象的功能 设计模式:一些通用的解决固定问题的方式 装饰器模式 代理模式 概念: 在代理模式(Proxy Pattern)中,一个类代表另一个类的功能.这种类型的设计模式属于结构型模式. 在代理模 ...

  8. 016.Kubernetes二进制部署所有节点kube-proxy

    一 部署 kube-proxy kube-proxy 运行在所有节点上,它监听 apiserver 中 service 和 endpoint 的变化情况,创建路由规则以提供服务 IP 和负载均衡功能. ...

  9. Mysql 开启远程连接服务

    Mysql 开启远程连接服务 修改要远程访问的那个用户的 host 为 % use mysql; insert into user (host, user, password) values('%', ...

  10. nyoj 53-不高兴的小明 (遍历)

    53-不高兴的小明 内存限制:64MB 时间限制:3000ms Special Judge: No accepted:28 submit:89 题目描述:    小明又出问题了.妈妈认为聪明的小明应该 ...