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. [考试反思]1101csp-s模拟测试97:人品

    上来粘6个图皮一下.(以后粘排行榜是不是都应该粘两份啊...文件出入的确挺难受的) 话说最近RP为什么会这么高啊???我干什么好事了???不知道. 这次考试的题挺有水准的,但是我的分数挺没水准的. T ...

  2. strGame:博弈论,trie

    挺有意思的一道题.初探博弈论. 最好自己思考? 我们先考虑只有1轮游戏的情况. 这题明显要在字符串上一位一位地走,所以对字符串建立起trie. 最终建立起的trie的叶节点就是必败位置了. 对于非叶节 ...

  3. NOIP模拟 32

    我在31反思中膜拜过了B哥 没想到这次又... 我给老姚家丢脸了...STO 首先T1暴力就写挂了... 贪图从$n^3$*$2^n$优化成$n^2$*$2^n$然后打错了 哗哗的扔分 而且正解都想不 ...

  4. PHP Notice: Undefined index:解决方法

    PHP Notice:  Undefined index:解决方法 PHP Notice: Undefined index: 解决方法 <pre> if (empty(swoole_get ...

  5. 面试开挂:近百道Java面试题整理

    1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被 ...

  6. C语言:大数取余

    大数取余数(数组) 今天做学校的oj时遇到一题,问题可见一下截图: 查遍各大论坛,都没有遇到合适的方法,普通方法不可用,要采用数组的形式. 被除数超过long long类型,不能采用常规思路,否则会出 ...

  7. tomcat 部署springboot 项目

    Springboot项目默认jar包,且内置Tomcat.现需要将项目打成war包,并部署到服务器tomcat中. 1.修改pom.xml文件.将jar修改为war. <packaging> ...

  8. 启动Spring Tool Suite 4时出现 could not find tools.jar spring boot live hovers....弹窗

    第一步:检查一下STS启动时的加载环境 Help  —› About Spring Tool Suite 4 —› Installation Details —› Configuration 本人已经 ...

  9. FB力挺的Pytorch深度学习 书本来了

    获得 fb首席科学家力挺的 pytorch教程 发布啦, 看截图 ![file](https://img2018.cnblogs.com/blog/1876748/201911/1876748-201 ...

  10. 视频抓取利器you-get

    本文链接:https://github.com/soimort/you-get/wiki/%E4%B8%AD%E6%96%87%E8%AF%B4%E6%98%8E You-Get 乃一小小哒命令行程序 ...