//先加载插件所需要的 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. Mac下配置Apache Httpd的Https/SSL

    Mac下配置Apache Httpd的Https/SSL httpd版本: httpd-2.4.17 jdk版本: jdk1.8.0_65 参考来源: Mac下安装Apache Httpd Mac O ...

  2. Iconfont在移动端应用的问题

    关于部分奇葩用户代理不显示字体图标 以酷派为代表的部分安卓手机自带浏览器.微信/QQ WebView 等用户代理无法正常显示 Icon Font,原因可能是这些用户代理无法正确处理伪元素 conten ...

  3. SQL自定义函数

    1,自定义函数--返回单一值 CREATE FUNCTION [dbo].[Round2] ( -- Add the parameters for the function here @p1 sql_ ...

  4. drupal7 的核心模块

    核心模块 Drupal 7 block Block(区块)模块提供了与区块相关的功能,通过区块可将内容放置在网站不同区域.Block模块是Drupal的基础模块之一,不能被禁用.它是通过单独的区块管理 ...

  5. 《开发专家 Visual C 开发入行真功夫》笔记

    智能感知的功能,输入 is 后,同时按下Alt + →这两个键就出现了供选择变量.方法.宏等的列表,继续输入 in 后,isInit就出来了. stdafx.h预编译头文件,.h应用程序主头文件,do ...

  6. JAVASCRIPT 之escape 介绍

    escape() 方法:采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字 符都将被转化成%xx格式的字符编码(xx等于该字符在字符集表里面的编 ...

  7. SQLite 日期 & 时间

    具体看http://www.runoob.com/sqlite/sqlite-date-time.html 不过实例介绍的不够详细,以下详细举例: SQLite包含了如下时间/日期函数:datetim ...

  8. Self20171218_TestNG+Maven+IDEA环境搭建

    前言: 主要进行TestNG测试环境的搭建 所需环境: 1.IDEA UItimate 2.JDK 3.Maven 一.创建工程 File –>new –>Project–>next ...

  9. Window7 Cocos2d-x配置开发环境

    1.到Cocos2d-x官方网下载最新版,解压后在目录cocos2d-x-2.1.5\tools\project-creator\create_project.py 2.安装Python,到网站htt ...

  10. Ubuntu18.04 + cuda9.0+cudnn7.0

    1 cannot find Toolkit in /usr/local/cuda-8.0 2017年05月27日 17:37:33 阅读数:2754  对于新版本ubuntukylin17.04安装C ...