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. Golang的json包

    encoding/json encoding/json是官方提供的标准json, 实现RFC 7159中定义的JSON编码和解码.使用的时候需要预定义struct,原理是通过reflection和in ...

  2. Net Core Identity 身份验证:注册、登录和注销 (简单示例)

    一.前言 一般我们自己的系统都会用自己设置的一套身份验证授权的代码,这次用net core的identity来完成简单的注册.登录和注销. 二.数据库 首先就是创建上下文,我这里简单的建了Users和 ...

  3. Opencv-Python项目(1) | 基于meanshiftT算法的运动目标跟踪技术学习

    目标跟踪(object tracking)就是在连续的视频序列中,建立所要跟踪物体的位置关系,得到物体完整的运动轨迹. 目标跟踪分为单目标跟踪和多目标跟踪.本文如无特别指出,均指单目标跟踪. 通常的做 ...

  4. 生活问题 | 对华为畅玩手机5X进行升级

    步骤一:准备一张SD卡,建议使用Sandisk, Kingstone, 或Kingmax,大小建议在2G KIW-AL10C00B258 软件版本升级指导书 Secret  2016-11-25 Hu ...

  5. Kubernetes 挂载文件到pod里面

    下面以chart为例子: 1.创建ConfigMap,这里要注意config.js为挂载的文件名 [root@cn-hongkong templates]# cat app-config.yaml a ...

  6. python入门递归之汉诺塔

    def hani(n,x,y,z): if n == 1 : print(x ,"-->",z) else: hani(n-1,x,z,y)#将n-1个盘子从x移到y pri ...

  7. Android常见内存泄露

    前言 对于内存泄漏,我想大家在开发中肯定都遇到过,只不过内存泄漏对我们来说并不是可见的,因为它是在堆中活动,而要想检测程序中是否有内存泄漏的产生,通常我们可以借助LeakCanary.MAT等工具来检 ...

  8. IDEA Debug 无法进入断点的解决方法

    文章来源: https://studyidea.cn/idea_breakpoint_not_use 前言 某个多模块项目中使用多个版本的 Spring,如 Spring 4,Spring 5,在使用 ...

  9. java遍历一个实体

    //遍历order,得到属性值不为空的属性,type:操作类型.0是新增,1是更新 private Map<String, Object> reflect(Order order,Stri ...

  10. 【python测试开发栈】python基础语法大盘点

    周边很多同学在用python,但是偶尔会发现有人对python的基础语法还不是特别了解,所以帮大家梳理了python的基础语法(文中的介绍以python3为例).如果你已然是python大牛,可以跳过 ...