PHP + plupload.js实现多图上传并显示进度条加删除实例代码

PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例,废话不多说,直接上代码

HTML代码:

<!DOCTYPE html> 

<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>多图上传</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plupload.full.min.js"></script>
</head>
<body>
<style type="text/css">
*{ margin:0px; padding:0px; font-family:Microsoft Yahei; box-sizing:border-box; -webkit-box-sizing:border-box;}
.demo{max-width:640px; margin:0 auto; min-width:320px;}
.ul_pics{ float:left;}
.ul_pics li{float:left; margin:0px; padding:0px; margin-left:5px; margin-top:5px; position:relative; list-style-type:none; border:1px solid #eee; width:80px; height:80px;}
.ul_pics li img{width:80px;height:80px;}
.ul_pics li i{ position:absolute; top:0px; right:-1px; background:red; cursor:pointer; font-style:normal; font-size:10px; width:14px; height:14px; text-align:center; line-height:12px; color:#fff;}
.progress{position:relative; margin-top:30px; background:#eee;}
.bar {background-color: green; display:block; width:0%; height:15px; }
.percent{position:absolute; height:15px; top:-18px; text-align:center; display:inline-block; left:0px; width:80px; color:#666; line-height:15px; font-size:12px; }
.demo #btn{ width:80px; height:80px; margin-left:5px; margin-top:5px; border:1px dotted #c2c2c2; background:url(up.png) no-repeat center; background-size:30px auto; text-align:center; line-height:120px; font-size:30px; color:#666; float:left;}
</style>
<div class="demo">
 <a href="javascript:void(0)" rel="external nofollow" id="btn"></a>
 <ul id="ul_pics" class="ul_pics clearfix">
 </ul>
</div>
<script type="text/javascript">
var uploader = new plupload.Uploader({    //创建实例的构造方法
 runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
 browse_button: 'btn',           // 上传按钮
 url: "upimgs.php?get=upimg",        //远程上传地址
 flash_swf_url: 'plupload/Moxie.swf',    //flash文件地址
 silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址
 filters: {
  max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb)
  mime_types: [  //允许文件上传类型
    {title: "files", extensions: "jpg,png,gif"}
  ]
 },
 multipart_params:{ },  //文件上传附加参数
 file_data_name:"upimg", //文件上传的名称
 multi_selection: false, //true:ctrl多文件上传, false 单文件上传
 init: {
  FilesAdded: function(up, files) { //文件上传前
    if ($("#ul_pics").children("li").length > 5) {
      alert("您上传的图片太多了!");
      uploader.destroy();
    } else {
      var li = '';
      plupload.each(files, function(file) { //遍历文件
        li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>上传中 0%</span></div></li>";
      });
      $("#ul_pics").append(li);
      uploader.start();
    }
  },
  UploadProgress: function(up, file) { //上传中,显示进度条
  var percent = file.percent;
    $("#" + file.id).find('.bar').css({"width": percent + "%"});
    $("#" + file.id).find(".percent").text("上传中 "+percent + "%");
  },
  FileUploaded: function(up, file, info) { //文件上传成功的时候触发
    var data = eval("(" + info.response + ")");
    $("#" + file.id).html("<img src='" + this.url + "'/><i onclick='delimg(this)'>x</i><input type='hidden' name='' value='"+ this.url +"'>");
  },
  Error: function(up, err) { //上传出错的时候触发
    alert("error");
  }
 }
});
uploader.init(); 

function delimg(o){
  var src = $(o).prev().attr("src");
  $.post("upimgs.php?get=delimg&imgurl="+src,function(data){
    if(data==1){
      $(o).parent().remove();
    }
  })
}
</script>
</body>
</html> 

PHP 代码:

<?php
$typeArr = array("jpg", "png", "gif");//允许上传文件格式
$path = "files/";//上传路径
 if (isset($_POST)) {
  if($_GET['get']=="upimg"){
   $name = $_FILES['file']['name'];
   $size = $_FILES['file']['size'];
   $name_tmp = $_FILES['file']['tmp_name'];
   if (empty($name)) {
     echo json_encode(array("error"=>"您还未选择图片"));
     exit;
   }
   $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型  

   if (!in_array($type, $typeArr)) {
     echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片!"));
     exit;
   }
   if ($size > (1024 * 1024 * 10)) {
     echo json_encode(array("error"=>"图片大小已超过10MB!"));
     exit;
   }  

   $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
   $pic_url = $path . $pic_name;//上传后图片路径+名称
   if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
     echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
   } else {
     echo json_encode(array("error"=>"上传有误,清检查服务器配置!"));
   }
  }
  if($_GET['get']=="delimg"){
    $imgsrc = $_GET['imgurl'];
    unlink($imgsrc);
    echo 1;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-03-05

使用JS+plupload直接批量上传图片到又拍云

论坛或者贴吧经常会需要分享很多图片,上传图片比较差的做法是上传到中央服务器上,中央服务器再转发给静态图片服务器.而这篇文章讲介绍如何使用plupload对上传过程进行优化,并绕过服务器直接批量上传图片到又拍云上的方法.本文集中会讲到以下几个重点: 复制代码 代码如下: plupload库 图片的本地压缩 多选图片 绕过服务器直接批量上传图片到又拍云 使用又拍的HTTP FORM API plupload的配置 plupload库 plupload是一个支持非常丰富的图片上传插件.可以对低版本的浏

thinkPHP3.2简单实现文件上传的方法

本文实例讲述了thinkPHP3.2简单实现文件上传的方法.分享给大家供大家参考,具体如下: IndexController.class.php: <?php namespace Home\Controller; use Think\Controller; class IndexController extends Controller { function index(){ $this->display(); } public function upload(){ $upload = new

ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法

本文实例讲述了ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法.分享给大家供大家参考.具体实现方法分析如下: 首先,AjaxFileUploader插件是一个基于jquery的插件,我们可以使用AjaxFileUploader插件来实现文件异步上传功能了,使用这款插件上传文件不要担心兼容性的问题,它的兼容性可以说兼容所有主流浏览器,下面来给大家介绍一个AjaxFileUploader+thinkphp实现文件上传的实例. ThinkPHP框架下用AjaxFileUpl

ThinkPHP文件上传实例教程

文件上传是很多PHP程序项目中常见的一个功能,今天本文就来分享一个完整的实例,来实现ThinkPHP文件上传的功能.具体方法如下: 一.action部分: FileAction.class.php页面代码如下: <?php class FileAction extends Action{ function index(){ $file=M('file'); $list=$file->select(); $this->assign('filelist',$list); $this->

yii2.0使用Plupload实现带缩放功能的多图上传

本文讲解了plupload的相关代码,实现了ajax多图同时上传,然后将图片进行缩放,最后显示图片,分享给大家供大家参考,具体内容如下 1.文章视图中调用Plupload <?= \common\widgets\Plupload::widget([ 'model'=>$model, 'attribute'=>'cover_img', 'url'=>'/file/upload',//处理文件上传控制器 ])?> 2.\common\widgets\Plupload 组件 <

thinkPHP5框架整合plupload实现图片批量上传功能的方法

本文实例讲述了thinkPHP5框架整合plupload实现图片批量上传功能的方法.分享给大家供大家参考,具体如下: 在官网下载plupload http://http//www.plupload.com 或者点击此处本站下载. 这里我们使用的是pluploadQueue 在HTML页面引入相应的css和js,然后根据示例代码修改为自己的代码 <link rel="stylesheet" href="/assets/plupupload/css/jquery.plupl

Thinkphp多文件上传实现方法

本文实例讲述了Thinkphp多文件上传实现方法,分享给大家供大家参考.具体实现方法如下: Thinkphp手册中对于多文件上传描述的很清楚:如果需要使用多个文件,只需要修改表单,把 复制代码 代码如下: <input type='file' name='photo'> 改为 复制代码 代码如下: <li><input type='file' name='photo1'></li> <li><input type='file' name='

封装ThinkPHP的一个文件上传方法实例

本文实例讲述了封装ThinkPHP的一个文件上传方法,分享给大家供大家参考.具体如下: 这阵子,对WBlog的上传功能作了优化.改进后的上传功能可以实现缩略图上传,图片上传,生成水印,文件上传,并且可以在后台对上传的附件进行大小(文件大小),类型(文件类型),水印(针对图片)的进行设置.此外还可以对上传的文件进行分类保存到相应的文件夹里,方便管理. 下面是对改进后的上传功能作简约的说明. 缩略图上传 先前的缩略图上传功能使用了KindEditor的上传组件,除非上传之前对图片进行缩略处理,不然上

thinkphp jquery实现图片上传和预览效果

先上效果图: 那个file按钮样式先忽略 点击选择图片(浏览),随便选一张图片 js代码如下 //上传图片立即预览 function PreviewImage(imgFile) { var filextension = imgFile.value.substring(imgFile.value .lastIndexOf("."), imgFile.value.length); filextension = filextension.toLowerCase(); if ((filexte

thinkphp实现图片上传功能分享

1.我们首先需要创建一个表 复制代码 代码如下: CREATE TABLE IF NOT EXISTS `tp_image` (  `id` int(11) NOT NULL AUTO_INCREMENT,  `image` varchar(200) NOT NULL,  `create_time` int(11) NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8; 2.然后再conf文件里添加配置(最后一段配置

基于ThinkPHP5.0实现图片上传插件

效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例

本文实例讲述了TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法.分享给大家供大家参考,具体如下: 1-引入js文件和css文件 <!--图片上传--> <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/sta

TP5 基于bootstrap实现多图上传插件

1----引入js文件和css文件 <!--图片上传--> <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/static/css/fileinput.css" rel="external nofollow"

jQuery自定义图片上传插件实例代码

摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

ThinkPHP5+Layui实现图片上传加预览功能

html代码 <div class="layui-upload"> <button type="button" class="layui-btn" id="cover">上传封面</button> </div> <div class="layui-input-inline"> <img id="preview" width

基于firefox实现ajax图片上传

图片文件上传,有很多种协议的,这次主要讲的是"Content-Type:multipart/form-data;"的形式. 在工作中前台一些静态文件是通过FTL模版系统,前台页面通过SSI进行引用的,项目开发的时候就需要生成大量的静态SHTML文件了,本来觉得应该是后台的事情,可是自从我进这公司,这快东西就交给了前端~~我表示无语,没办法就按着习惯来吧,但我是个懒人,就想着能不能通过ajax提交呢 基于平时对MDN的翻阅,今天主要是FormData这个对象解决多文件上传的协议. htt

基于vue-upload-component封装一个图片上传组件的示例

需求分析 业务要求,需要一个图片上传控件,需满足 多图上传 点击预览 图片前端压缩 支持初始化数据 相关功能及资源分析 基本功能 先到https://www.npmjs.com/search?q=vue+upload上搜索有关上传的控件,没有完全满足需求的组件,过滤后找到 vue-upload-component 组件,功能基本都有,自定义也比较灵活,就以以此进行二次开发. 预览 因为项目是基于 vant 做的,本身就提供了 ImagePreview 的预览组件,使用起来也简单,如果业务需求需要

基于Node的React图片上传组件实现实例代码

写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

Servlet3.0学习总结之基于Servlet3.0的文件上传实例

在Servlet2.5中,我们要实现文件上传功能时,一般都需要借助第三方开源组件,例如Apache的commons-fileupload组件,在Servlet3.0中提供了对文件上传的原生支持,我们不需要借助任何第三方上传组件,直接使用Servlet3.0提供的API就能够实现文件上传功能了. 一.使用Servlet3.0提供的API实现文件上传 1.1.编写上传页面 <%@ page language="java" pageEncoding="UTF-8"%

jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

特点: 1.不依赖与jquery 2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来 用法: 复制代码 代码如下: <link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" /><script src="http://fineuploader.com/source/fineupload