php ajax bootstrap多文件上传图片预览,ajax上传文件
<form enctype="multipart/form-data" id="upForm">
<label class="btn btn-info" for="picture" title="Upload image file" id="uploadImgBtn" class="image_up">
<input type="file" name="file" multiple class="sr-only" id="picture" accept=".jpg,.jpeg,.png">
<span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">选择本地图片</span>
</label>
<div id="previewImg" class="col-md-5">
</div>
</form>
$('#picture').on('change', function(){
#图片预览并上传
var imgFiles = $(this)[0].files
for (i=0;i<imgFiles.length;i++){
filePath = imgFiles[i].name
fileFormat = filePath.split('.')[1].toLowerCase()
src = window.URL.createObjectURL(imgFiles[i])
if(!fileFormat.match(/png|jpg|jpeg/) ) {
alert('上传错误,文件格式必须为:png/jpg/jpeg')
return
}
var preview = document.getElementById("previewImg")
var img = document.createElement('img')
img.width = 600
img.src = src
preview.appendChild(img)
}
//多文件
var formData = new FormData();
for(var i=0; i<$('#picture')[0].files.length;i++){
formData.append('file[]', $('#picture')[0].files[i]);
}
//单文件
// var formData = new FormData($('#upForm')[0]);
//formData.append('file',$(':file')[0].files[0]);
console.log(formData)
$.ajax({
url:'/orc/recognition/upload',
type: 'POST',
data: formData,
//这两个设置项必填
contentType: false,
processData: false,
success:function(data){
var srcPath = eval("(" + data + ")");
//注意这里的路径要根据自己的储存文件的路径设置
if(srcPath.msg != 'true'){
//alert('未识别的文件');
}else{
//$('#image_orc').attr('src', '/' + srcPath.src);
}
location.reload(); }
}) })
PHP:
public function upload(){
$upFile = $_FILES['file'];
var_dump($upFile);
}
php ajax bootstrap多文件上传图片预览,ajax上传文件的更多相关文章
- 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...
- 原生js实现图片预览并上传
最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...
- ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案
摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...
- 用js实现预览待上传的本地图片
js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- html5 选择多张图片在页面内预览并上传到后台
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...
- WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法
由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...
- ajax异步上传文件和表单同步上传文件 的区别
1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...
- Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮
Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:
随机推荐
- Rancher与OpenLDAP对接
简要说明: Rancher官网文档中,关于访问控制,有与OpenLDAP对接的介绍,但只是简要一笔带过,Rancher与OpenLDAP对接页面中的几个参数如何填写,并没有详细的说明. 本文通过Ope ...
- FileNotFoundException报错, src\main\....\....(拒绝访问) , 原因:1. 方法没有判断文件夹和文件, 2.没有指明文件的具体路径和名字
- python 安装包
一般python的包都是.tar.gz结尾的压缩包,据说是linux下面的格式.但也是可以在windows上面安装的,安装过程,1,在 https://pypi.python.org/pypi 这个网 ...
- MySQL学习(十四)
utf8的bom问题 在xp下,用记事本创建utf8文件的时候,前面多了3个字节,这3个字节不用来显示,是用来辨识编码用的,EF BB BF告诉记事本,这是utf8编码. 存储引擎和事务简单介绍 引擎 ...
- Python全栈开发-Day4-Python基础4
本节内容 匿名函数 装饰器 列表生成式.迭代器&生成器 内置函数 Json & pickle 数据序列化 1. 匿名函数 匿名函数就是不需要显式的指定函数 1 2 3 4 5 6 7 ...
- Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示?
Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示? 公司开发款APP,要给领导演示,总不能用手机面对面演示吧.所以找了好久,找到一款体验超好的: Total Control-帮助你 ...
- 数据库:Mysql中“select ... for update”排他锁分析
Mysql InnoDB 排他锁 用法: select … for update; 例如:select * from goods where id = 1 for update; 排他锁的申请前提:没 ...
- SpringBoot集成TkMybatis插件 (二)
一.Tkmybatis的好处 Tkmybatis是在mybatis框架的基础上提供了很多工具,让开发更加高效.这个插件里面封装好了我们需要用到的很多sql语句,不过这个插件是通过我们去调用它封装的各种 ...
- 20165327 2017-2018-2 《Java程序设计》第8周学习总结
20165327 2017-2018-2 <Java程序设计>第8周学习总结 教材内容总结 第十二章 (一)教材学习内容总结 线程是比进程更小的执行单位.一个进程在其执行过程中,可以产生多 ...
- Docker 镜像上传到docker hub仓库
1 先创建docker hub 帐号 ,并创建仓库 https://hub.docker.com/ 首先你需要一个docker hub 帐号,记住username,password,email .后面 ...