技术文章
当前位置:首页 > PHP编程文章 > php WebUploader实现图片批量上传功能

php WebUploader实现图片批量上传实例方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:86

这篇文章主要知识点是关于php、WebUploader、图片、批量上传、webuploader实现上传图片到服务器功能 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP开发实例大全:提高卷
  • 类型:PHP开发大小:241.1 MB格式:PDF出版:清华大学出版社作者:软件开发技术联盟
立即下载

更多PHP相关的学习资源可以参阅 PHP电子书程序设计电子书 等栏目。

php WebUploader实现图片批量上传功能

一.webuploader

webuploader主要用来做文件的上传,支持批量上传和图片预览,图片预览是将图片生成base64数据直接在标签中使用,所以能够达到的效果是未真正上传图片可以先看到上传的效果。更多具体的介绍,可以上webuploader的官方网址看,我一直认为,看官网文档是学习最直接的途径。 webuploader官方网站,顺带一提,webuploader是由Baidu Fex Team团队进行维护的。

二. webuploader上传原理

1. PHP+HTML表单上传文件

在讲这个之前,需要先了解一下php的文件上传方式,上传分两个部分

先通过html创建表单,在表单中添加

<input type='file' name='xxx'>

的文件上传标签,点击上传的submit 按钮之后,就可以将文件上传到服务器了。

2. 到了服务器端,接收到的上传文件会被存储在php指定的临时文件夹中,利用PHP的内置函数move_uploaded_file(),就可以将临时文件移动到你想要的目标文件夹中,这个过程可以对文件进行改名、做大小判断是否符合条件等,这样上传就完成了。

完整的php表单上传案例,可以看w3school的这篇文章,这里就不累赘了。PHP+HTML表单上传文件

2. webuploader上传原理

使用php+html表单上传可以完成文件的上传工作,但是有缺点,

  • 上传文件时必须提交整个页面,这样页面会被刷新
  • 上传图片是没办法进行图片预览,所以有时候上传错了图片也要等到图片真正上传上去之后刷新了页面才知道。

webuploader解决了这两个问题,webuploader使用ajax技术提交表单,上传的时候不需要提交页面,可以利用事件监听机制监听上传的结果,在页面中做出反馈,而且还能做图片预览。使用webuploader上传图片,也只需要几步:

  • 前台HTML页面配置webuploader
  • 后台服务器PHP页面接受webuploader的上传图片,然后进行处理。
  • 后台处理完图片返回json数据的结果给前台
  • 前台接收后作出反馈。

这里说一点,后台PHP接收和处理图片其实和PHP+HTML表单上传基本是一样的。

三. webuploader的配置和使用

所有的配置参数和使用方法都可以查看官方文件。webuploader官方网站,在webuploader github仓库中有一些example案例可以参考。example

我的运行环境:php5.6+nginx+macOS

我的文件夹的目录

  • index.php
  • upload_img.php
  • mywebupload.js
  • webuploader/
  • uploads/

1. 前台HTML页面配置webupload

主要做以下几个步骤:

  • 引入webuploader的相关js和css包
  • 创建HTML标签
  • 创建一个js文件,初始化webuploader  以下是整个页面代码,webuploader文件夹是在github上整个搬运下来的,然后我还用到了jquery来增强页面的体验。

index.html

<!doctype html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>WebUploader演示</title>
  <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css" />
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" />
  <link rel="shortcut icon" href="favicon.ico">
</head>
<body>

  <div id="imgPicker">选择文件</div>
  <button class="btn btn-primary btn-upload">上传</button>
  <div class="img-thumb"></div>
  <div class="result"></div>
  
<!--jquery 1.12-->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--bootstrap核心js文件-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--webuploader js-->
<!--<script type="text/javascript" src="static/jquery.js"></script>-->
<script type="text/javascript" src="webuploader/dist/webuploader.min.js"></script>
<script type="text/javascript" src="mywebupload.js"></script>
</body>
</html>

mywebupload.js

$(function(){

  /*
   *  配置webuploader
   */

  var imgUploader = WebUploader.create({
    fileVal: 'img', // 相当于input标签的name属性,用于后台PHP识别接收上传文件的field
    swf: './webuploader/dist/Uploader.swf', // swf文件路径
    server: './upload_img.php', // 文件接收服务端。
    fileNumLimit: 10,  // 上传文件的限制
    pick: {
      id : '#imgPicker',  // 
      multiple : true      // 是否支持多文件上传
    },
    // 只允许上传图片
    accept: {
      title: 'Only Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
    },
    auto: false,  // 添加文件后是否自动上传上去,我设置了false,后面我会利用自己的上传按钮上传
    resize: false  // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
  });
  
  /*
   *  设置上传按钮的单击事件
   */
  $('.btn-upload').click(function(){
    imgUploader.upload();  // webuploader内置的upload函数,启动webuploader的上传  
  });
  
  /*
   *  配置webuploader的事件监听 
   */
  
  // 当图片文件被添加到上传队列中
  imgUploader.on('fileQueued', function (file) {
    addImgThumb(file);
  });
  
  // 生产图片预览
  function addImgThumb(file){
    imgUploader.makeThumb(file, function(error, ret){
      if(!error){
        img = '<img alt="" src="' + ret + '" />';
        $('.img-thumb').append(img);
      }else{
        console.log('making img error');
      }
    },1,1);
  }
  
  imgUploader.on('uploadSuccess'), function(file, response){
    // response 是后台upload_img.php返回的数据
    if(response.success){
      $('.result').append('<p>' + file.name + '上传成功</p>')
    }else{
      $('.result').append('<p>' + response.message + '</p>')
    }
  });
})

2. 后台PHP页面处理上传文件

这里要注意几点:

1 后台处理的php文件文件名必须跟webuploader配置的时候一样。

2 上传的文件夹记得设置好权限,linux可以利用chmod来修改文件夹权限,否则会导致上传失败。

我这里的处理方式比较简单,有什么问题可以给我留言。

upload_img.php

<?php
  $field = 'img';  // 对应webupload里设置的fileVal
  
  $savePath = './uploads/';    // 这里注意设置uploads文件夹的权限
  $saveName = time() . uniqid() . '_' . $_FILES[$field]['name']; // 为文件重命名
  $fullName = $savePath . $saveName; 
  
  if (file_exists($fullName)) {
    $result = [
      'success'=>false, 
      'message'=>'相同文件名的文件已经存在'
    ];
  }else{
    move_uploaded_file($_FILES[$field]["tmp_name"], $fullName);
    $result = ['success'=>true, 'fullName'=>$fullName];
  }
  
  return json_encode($result); // 将结果打包成json格式返回
?>

以上就是webuploader的全部内容,更多webuploader的参数配置和事件可以参考webuploader的官方网址。希望大家多多留言交流指正。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对码农之家的支持。

webuploader实现上传图片到服务器功能

本文为大家分享了webuploader实现上传图片到服务器的具体代码,供大家参考,具体内容如下

效果图:

webuploader实现上传图片到服务器功能

一、引入资源文件

1.1 引入webuploader.css文件

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="../../css/plugins/webuploader/webuploader.css" >

1.2 引入webuploader.min.js文件

<!--引入JS-->
<script type="text/javascript" src="../../js/plugins/webuploader/webuploader.min.js"></script>

二、HTML代码

<div class = "row">
 <div class="btns col-sm-2">
  <div id="picker">选择文件</div>
  <button id="ctlBtn" class="btn default-btn">开始上传</button>
 </div>
 <!--用来存放文件信息-->
 <div id="thelist" class="uploader-list col-sm-10"></div>
</div>

三、JavaScript代码

<script type="text/javascript">
  $(function(){
   var uploader = WebUploader.create({
    // 选完文件后,是否自动上传。
    auto: false,
    // 文件接收服务端。
     server: '/common/webupload_pic',
     // 选择文件的按钮。可选。
     // 内部根据当前运行是创建,可能是input元素,也可能是flash.
     pick: '#picker',
     // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
     resize: false,
     // 只允许选择图片文件。
     accept: {
      title: 'Images',
      extensions: 'gif,jpg,jpeg,bmp,png',
      mimeTypes: 'image/*'
     },
     /* fileSizeLimit :10, //验证文件总大小是否超出限制, 超出则不允许加入队列
     fileSingleSizeLimit :10,   //验证单个文件大小是否超出限制, 超出则不允许加入队列。 */
     duplicate :true //去重, 根据文件名字、文件大小和最后修改时间来生成hash Key.

    });


  // 当文件被加入队列之前触发,此事件的handler返回值为false,则此文件不会被添加进入队列。
   uploader.on( 'beforeFileQueued', function( file ) {
    // 限制图片数量
    img_length = $("#thelist img").length;
    if (img_length >= 6) {
    layer.msg("图片最多上传6张");
    return false;
    }

   });

  // 当有文件添加进来的时候
   uploader.on( 'fileQueued', function( file ) {
   var $li = $(
      '<div id="' + file.id + '" class="file-item thumbnail col-sm-3" >' +
       '<img>' +
       '<div class="info">' + file.name + '</div>' +
       '<span  onclick="deleteFile(this)">删除</span>' +
      '</div>'
      ),
     $img = $li.find('img');
    // $list为容器jQuery实例
    $("#thelist").append( $li );
    // 创建缩略图
    // 如果为非图片文件,可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
     if ( error ) {
      $img.replaceWith('<span>不能预览</span>');
      return;
     }
     $img.attr( 'src', src );
    }, 150, 150 );

   });

  // 文件上传成功,给item添加成功class, 用样式标记上传成功。
   uploader.on( 'uploadSuccess', function( file ) {
    $( '#'+file.id ).addClass('upload-state-done');
    var $li = $( '#'+file.id ),
     $done = $li.find('div.upload-state-done');
    // 避免重复创建
    if ( !$done.length ) {
    $done = $('<div class=""></div>').appendTo( $li );
    }
    $done.html('<font color="blue">上传成功</font>');
   });

  // 文件上传失败,显示上传出错。
   uploader.on( 'uploadError', function( file ) {
    var $li = $( '#'+file.id ),
     $error = $li.find('div.error');
    // 避免重复创建
    if ( !$error.length ) {
     $error = $('<div class="error"></div>').appendTo( $li );
    }
    $error.html('<font color="red">上传失败</font>');
   });

   $("#ctlBtn").click(function(){
    uploader.upload();
   })

  })

  function deleteFile(obj) {
   $(obj).parent().remove();
  }
</script>

四、java代码

/**
  *
  * @Title: webuploadPic
  * @Description: webupload插件上传图片
  * @author: 大都督
  * @param files
  * @return
  * @throws IOException
  * @return: MessageInfo
  */
  @RequestMapping("/webupload_pic")
  @ResponseBody
  public MessageInfo webuploadPic(HttpServletRequest request) throws IOException {
   MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
   Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();
   List<String> file_url_list = Lists.newArrayList();
   for (MultipartFile file:fileMap.values()) {
    file_url_list.add("/pictures/"+FileUtil.uploadFile(file, pictures_url));
   }
   return ResultGenerator.genSuccessResult(file_url_list);
  }

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

以上就是本次给大家分享的关于PHP的全部知识点内容总结,大家还可以在下方相关文章里找到php调用快递鸟接口实例分、 thinkPHP5.0框架验证码及点击、 PHP7引入的"??"和"?:"的、 等php文章进一步学习,感谢大家的阅读和支持。

上一篇:YII框架行为behaviors用法详解

下一篇:PHP数组黑、白名单实例代码

展开 +

收起 -

相关电子书
学习笔记
网友NO.188541

WebUploader实现分片断点上传文件功能整理

写在前面: 这几天,有去研究一下WebUploader上传文件,前面的博客有记录下使用WebUploader简单上传文件的例子,今天就把分片断点上传的例子也记录下吧,在博客园中,也查看了一些资料,基本上后台处理数据都是用的Servlet,或者是SpringMVC,由于最近的项目一直都是Struts2,所以这里就用Struts2中的action来对数据进行处理,达到分片上传文件的效果。 1.什么是分片上传? 顾名思义,就是把文件分成一片片,即让一个文件,分割成好几个小文件,然后再上传。这样做的好处是便于上传大文件。 2.分片上传大致思路: 1.前台页面,选择文件,点击按钮进行上传。 2.WebUploader将上传的文件,分割成指定的个数,挨个发送到服务端后台。 3.服务器接收分割后的小文件,并存储到临时文件夹下 4.服务器接收分割后的小文件完毕后,前台页面执行上传成功函数。 5.在……

网友NO.794232

webuploader分片上传的实现代码(前后端分离)

本文介绍了webuploader分片上传的实现代码(前后端分离),分享给大家,具体如下: WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。采用大文件分片并发上传,极大的提高了文件上传效率。(这个是从官网上直接copy的解释) 功能描述 1、webuploader是百度研发的上传组件,文档不是特别规整,但是也够用了。 2、前端使用官网的上传图片demo,在此基础上代码略微调整做分片。既可以上传图片也可以上传文件。文件超过分片大小才启用分片。 3、分片上传已做md5校验,达到秒传的效果。分片以后需要合并,可以先分片后合并,也可以边分片边……

网友NO.209789

解决在Bootstrap模糊框中使用WebUploader的问题

在我毕设项目中有个需求是在Bootstrap模糊框中显示WebUploader的上传按钮,效果如下: 我们直接在Bootstrap的模糊框中插入了上传的组件: 然而实际效果却是当模糊框出现之后,却无法点击到上传按钮。 然而在我按F12想要查看控制台是否出错后,WebUploader居然可以弹出文件选择框,而且其他功能也都正常了。 经过查阅资料发现:出现Bug的原因是[选择文件]按钮的长宽都是0,需要重新渲染一下网页,而F12正好有渲染网页的功能,解决方案就是重新渲染或实例化Uploader。需要重新实例化: uploader.refresh() 第一想法就是就是给模糊框的按钮注册点击事件,点击弹出模糊框的时候进行 uploader.refresh() ;然而我在我进行修改之后貌似有其他BUG。 最后的解决办法就是监听模糊框触发显示的事件,然后刷新组件: $('#updateModal').on('shown.bs.modal',function() {//提示框显示时候触……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息