<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上传文件的更多相关文章

  1. 基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现

    前言 图片上传是web项目常见的需求,我基于之前的博客的代码(请戳:formData批量上传的多种实现)里的第三种方法实现多图片的预览.上传,并且支持三种方式添加图片到上传列表:选择图片.复制粘贴图片 ...

  2. 原生js实现图片预览并上传

    最近主导的PC客户端网站重构工程告一段落,下一阶段开始给公司APP开发H5页面,技术栈是react.最近碰到一个需求:需要在H5页面上添加身份证照片,预览并上传.因为要兼容安卓4.4以下版本的手机,所 ...

  3. ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案

    摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...

  4. 用js实现预览待上传的本地图片

    js实现预览待上传的本地图片,代码如下: <form name="form5" id="form5" method="post" ac ...

  5. JS原生上传大文件显示进度条-php上传文件

    JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M    post_max_size = 10M    memory_li ...

  6. html5 选择多张图片在页面内预览并上传到后台

    版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/huangxin112/article/details/74956462 需求:点击选择图片(可选多张) ...

  7. WebUploader 上传插件结合bootstrap的模态框使用时选择上传文件按钮无效问题的解决方法

    由于种种原因(工作忙,要锻炼健身,要看书,要学习其他兴趣爱好,谈恋爱等),博客已经好久没有更新,为这个内心一直感觉很愧疚,今天开始决定继续更新博客,每周至少一篇,最多不限篇幅. 今天说一下,下午在工作 ...

  8. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  9. Mark : Bootstrap fileInput控制预览页面上传、删除、详情按钮

    Bootstrap fileInput默认预览上传效果: 而我们可能想要的结果是: 这时候可以通过初始参数layoutTemplates来控制:

随机推荐

  1. python中网络编程基础

    一:什么是c\s架构 1.c\s即client\server 客户端\服务端架构. 客户端因特定的请求而联系服务器并发送必要的数据等待服务器的回应最后完成请求 服务端:存在的意义就是等待客户端的请求, ...

  2. 结合CRT与欧拉定理高阶幂求余

  3. LRN(local response normalization--局部响应标准化)

    LRN全称为Local Response Normalization,即局部响应归一化层,LRN函数类似DROPOUT和数据增强作为relu激励之后防止数据过拟合而提出的一种处理方法.这个函数很少使用 ...

  4. Android打开相机进行人脸识别,使用虹软人脸识别引擎

    上一张效果图,渣画质,能看就好 功能说明: 人脸识别使用的是虹软的FreeSDK,包含人脸追踪,人脸检测,人脸识别,年龄.性别检测功能,其中本demo只使用了FT和FR(人脸追踪和人脸识别),封装了开 ...

  5. nRF52832定时器

    1概述 定时器能够被配置为两种模式:定时模式和计数模式,nrf52832有五个定时器,timer0--timer4 . 2常用得函数 函数功能:初始化定时器 ret_code_t nrf_drv_ti ...

  6. python cook 整理

    1.字符串分割 单个分隔符    'abc'.split('b')  >> ['a','c'] 多个分隔符    re.split(r'[b,d]','abcde') >>&g ...

  7. Confluence 6 空间权限和链接到相关的空间

    空间权限 每一个空间将会创建一个默认的权限.创建空间的用户将会自动具有空间管理员(space admin)的权限,这个的意思是你可以为其他用户和用户组赋予空间访问和管理的权限. 请查看 Space P ...

  8. MySQL事务(一)

    一.基本介绍 事务就是一组dml语句,这些语句存在逻辑上的相关性,这一组dml语句要么全部成功,要么全部失败,是一个整体.ACID属性(原子性,一致性,隔离性,持久性):mysql提供一种机制,保证我 ...

  9. linux上安装vmtools

    在虚拟机和宿主机之间来说操作得一直按ctrl+alt,显得比较麻烦. 那么就只要安装一个工具就可以让我们的操作更加的简易,我对vmtools安装步骤做了以下图解. 在导航栏找到这个标签,选择安装vmt ...

  10. python-flask基本应用模板

    1.模板继承 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...