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];//获取文件数据 ...
随机推荐
- [考试反思]1101csp-s模拟测试97:人品
上来粘6个图皮一下.(以后粘排行榜是不是都应该粘两份啊...文件出入的确挺难受的) 话说最近RP为什么会这么高啊???我干什么好事了???不知道. 这次考试的题挺有水准的,但是我的分数挺没水准的. T ...
- strGame:博弈论,trie
挺有意思的一道题.初探博弈论. 最好自己思考? 我们先考虑只有1轮游戏的情况. 这题明显要在字符串上一位一位地走,所以对字符串建立起trie. 最终建立起的trie的叶节点就是必败位置了. 对于非叶节 ...
- NOIP模拟 32
我在31反思中膜拜过了B哥 没想到这次又... 我给老姚家丢脸了...STO 首先T1暴力就写挂了... 贪图从$n^3$*$2^n$优化成$n^2$*$2^n$然后打错了 哗哗的扔分 而且正解都想不 ...
- PHP Notice: Undefined index:解决方法
PHP Notice: Undefined index:解决方法 PHP Notice: Undefined index: 解决方法 <pre> if (empty(swoole_get ...
- 面试开挂:近百道Java面试题整理
1.什么是Java虚拟机?为什么Java被称作是“平台无关的编程语言”? Java虚拟机是一个可以执行Java字节码的虚拟机进程.Java源文件被编译成能被Java虚拟机执行的字节码文件. Java被 ...
- C语言:大数取余
大数取余数(数组) 今天做学校的oj时遇到一题,问题可见一下截图: 查遍各大论坛,都没有遇到合适的方法,普通方法不可用,要采用数组的形式. 被除数超过long long类型,不能采用常规思路,否则会出 ...
- tomcat 部署springboot 项目
Springboot项目默认jar包,且内置Tomcat.现需要将项目打成war包,并部署到服务器tomcat中. 1.修改pom.xml文件.将jar修改为war. <packaging> ...
- 启动Spring Tool Suite 4时出现 could not find tools.jar spring boot live hovers....弹窗
第一步:检查一下STS启动时的加载环境 Help —› About Spring Tool Suite 4 —› Installation Details —› Configuration 本人已经 ...
- FB力挺的Pytorch深度学习 书本来了
获得 fb首席科学家力挺的 pytorch教程 发布啦, 看截图 ![file](https://img2018.cnblogs.com/blog/1876748/201911/1876748-201 ...
- 视频抓取利器you-get
本文链接:https://github.com/soimort/you-get/wiki/%E4%B8%AD%E6%96%87%E8%AF%B4%E6%98%8E You-Get 乃一小小哒命令行程序 ...