//先加载插件所需要的 js 、css 文件

  1. <link href="css/fileinput.css" rel="stylesheet" type="text/css" />
  2. <script src="js/fileinput.js"type="text/javascript"></script>
  3. <script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
//然后 页面上代码      
 accept="image/*"  配置这个属性 (当点击选择文件时,自动过滤不是图片类型的文件)    name="image_data[]" 此属性(多图片上传时,可以将文件属性放到一个数组中)如图所示:
注 :多图上传  要将ajax设置成  同步
 
 
 
  1. <input type="file" class="file"id="img_url1" name="image_data[]"accept="image/*" multiple>
  1. $("#img_url1").fileinput({
  2. language: 'zh',
  3. uploadUrl: "upload", //上传后台操作的方法
  4. uploadAsync: false, //设置上传同步异步 此为同步
  5. maxFileSize: 200,
  6. allowedFileExtensions: ['jpg'] //限制上传文件后缀
  7. });//初始化 后 上传插件的样子


php中方法

  1. public function upload(){
  2. if(IS_AJAX)
  3. {
  4. $images_name = '';
  5. $img_name = time();
  6. foreach($_FILES['image_data']['tmp_name'] as$k=>$v)
  7. {
  8. move_uploaded_file($v,$img_path.$img_name.$k.'.jpg');
  9. $images_name  .=  $img_name.$k.'.jpg'.',';
  10. }
  11. }
  12. return 1; //这个返回值必须要
  13. }

了解更多 请参考http://plugins.krajee.com/file-input/demo#image-management

php 应用 bootstrap-fileinput 上传文件 插件 操作的方法的更多相关文章

  1. bootstrap fileinput上传文件

    参考博客:https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974  https://www.cnblogs.com/parker-y ...

  2. bootstrap fileinput 上传文件

    最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...

  3. .net core版 文件上传/ 支持批量上传,拖拽以及预览,bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  4. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  5. Uploadify 上传文件插件详解

    Uploadify 上传文件插件详解 Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中 ...

  6. 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据

    1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...

  7. 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传

    使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址  ...

  8. uploadify 上传文件插件

    今天在项目中要用到文件上传功能时,想借助Jquery方式来实现,于是想到用uploadify插件来实现.不经意间在网上看到了一遍关于这个插件的用法,写的很好.在这里就分享给大家,希望对大家有帮助.以下 ...

  9. Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法

    Unable to find ‘struts.multipart.saveDir’ Struts2上传文件错误的解决方法 在使用struts2的项目中上传文件的时候出现了一个这样的错误: 2011-7 ...

随机推荐

  1. Java中各种集合(字符串类)的线程安全性!!!

    Java中各种集合(字符串类)的线程安全性!!! 一.概念: 线程安全:就是当多线程访问时,采用了加锁的机制:即当一个线程访问该类的某个数据时,会对这个数据进行保护,其他线程不能对其访问,直到该线程读 ...

  2. js统计输入文字的字节数(byte)

    这里主要考虑的是日文,日文中包含了半角和全角文字,半角算1,全角算2. <html> <head> <script language="javascript&q ...

  3. js jQuery 右键菜单 清屏

    主要用到了oncontextmenu事件,在oncontextmenu事件中使用return false 屏蔽掉原生右键菜单,再使用event获取鼠标的坐标位置,设置自定义菜单的位置. http:// ...

  4. druid的配置

    //----------------------------pom.xml-------------------------------- <!-- druid --> <depen ...

  5. 攻城狮送女友的CSS3生日蛋糕

    在线预览:http://keleyi.com/keleyi/phtml/html5/29.htm 代码如下: <!DOCTYPE html> <html> <head&g ...

  6. css控制固定表头,兼容行列合并

    项目中设计的报表table设计的列数相对过多,当拖动下方的滚动条时无法对应表头所对应的列,因此在网上搜索了好一段日子,最后在网上找到了一些参考资料,然后总结归纳出兼容行列合并的固定表头demo. 多浏 ...

  7. Netty 介绍

    本指南对Netty 进行了介绍并指出其意义所在. 1. 问题 现在,我们使用适合一般用途的应用或组件来和彼此通信.例如,我们常常使用一个HTTP客户端从远程服务器获取信息或者通过web service ...

  8. tensorflow的升级与版本管理

    1 查看cuda与cudnn的版本 cuda一般安装在 /usr/local/cuda/ 路径下,该路径下有一个version.txt文档,里面记录了cuda的版本信息 cat  /usr/local ...

  9. Axiom3D:资源引用与加载基本流程.

    Archive:对应文件夹位置,包含文件夹,压缩文件,网络位置,包含Load,Unload,Open,Create,Remove,FineFile等主要虚方法,用于对应各具体Archive来实现. R ...

  10. Wifi 评分机制分析

    从android N开始,引入了wifi评分机制,选择wifi的时候会通过评分来选择. android O源码 frameworks\opt\net\wifi\service\java\com\and ...