php文件上传学习记录 php的web开发中关于上传文件的几种方法的总结 [php] 3个多文件上传(uploadify、file upload、 webuploader) PHP百度diyUpload多图上传插件实例

其他 2018-06-19 11:34:41 阅读次数: 2

php文件上传学习记录


1.多文件上传及预览功能效果：


代码分两部分：

1.index02.html

2.file_preview.php


1.index02.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        ul,ol{
            list-style-type:none;
        }

        .clearfix:after,.clearfix:before{

            display:table;
            content:' ';
        }

        .clearfix:after{
            clear:both
        }

        .tc{
            text-align:center;
        }

        .select,.select_video{
            height:2rem;
            line-height:2rem;
            background:#fff;
            border:1px solid #4285F4;
            margin:0.5rem 1rem;
            position:relative;
        }

        .select label,.select_video label{
            width:100%;
            position:absolute;
            top:0;
            left:0;
            font-size:14px;
            color:#333;
        }

        #upload,#upload_video{
            display:none;
        }

        .preview,.video_preview{
            margin:0.5rem 1rem;
            border:1px solid #bbb;
            padding:4px;
            display:none;
        }

        .preview_img_list li{
            float:left;
            width:25%;
            padding:2px 0;

        }   

        .preview_img_list li img{
            vertical-align:top;
            max-width:98%;
        }

        .btn{
            background: #4285F4;
            color:#fff;
            height:2.5rem;
            line-height:2.5rem;
            margin:2rem 1rem;
            border-radius:0.5rem;
        }
    </style>
    <script>
        window.onload = function(){

            var uploadBtn = document.querySelector('#upload');
            var previewImgList = document.querySelector('.preview_img_list');

            var uploadVideo = document.querySelector('#upload_video');
            var submitBtn = document.querySelector('.submit');

            imgArr = new Array();

            uploadBtn.addEventListener('change',function(){
                var imgLen = this.files.length;
                var liLen = previewImgList.getElementsByTagName('li').length;
                var ImgLen = imgLen + liLen ;

                if(ImgLen > 3){
                    alert("上传最大数量不能大于3");
                    return false;
                }

                document.querySelector(".preview").style.display = 'block';

                for (var i = 0; i < imgLen;i++) {
                    var file = this.files[i];
                    var imgType = /^image\//;

                    if (!imgType.test(file.type)) {
                        continue;
                    }

                    var li = document.createElement('li');
                    var img = document.createElement("img");

                    li.appendChild(img);
                    previewImgList.appendChild(li); 

                    var reader = new FileReader();
                    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; initHW(); imgArr.push(e.target.result);}; })(img);
                    reader.readAsDataURL(file);
                    // var objectUrl = window.URL.createObjectURL(file);
                    // img.src = objectUrl;
                }

            },false);


          /*  uploadVideo.addEventListener('change',function(){
                var file = this.files[0];
                var videoType = /^video\//;

                if(!videoType.test(file.type)){
                    alert("所选文件不是合法的视频文件");
                    return false;
                }

                var pv =  document.querySelector('.video_preview');
                var video =  document.createElement('video');
                video.setAttribute('controls','controls');
                video.style.width = "100%";

                pv.appendChild(video);
                pv.style.display = "block";
                // var objectUrl = window.URL.createObjectURL(file);
                // video.src = objectUrl;
                // 
                var reader = new FileReader();
                reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(video);
                reader.readAsDataURL(file);
                video.play();
            },false);*/

            submitBtn.addEventListener('click',function(){
                if(!imgArr.length){
                    alert('请选择要上传的图片');
                    return false;
                }
                var form = document.querySelector('form');
                var fd = new FormData(form);
                for(var i = 0;i < imgArr.length;i++){
                    fd.append('file[]',imgArr[i]);
                }

                var request = new XMLHttpRequest();
                var url = "./file_preview.php";
                request.open('post',url);
                request.send(fd);
            },false);

        }



        // 初始化图片宽度
        // 使得图片高度一致
        function initHW(){
            var previewImgList = document.querySelector('.preview_img_list');
            var Lis = previewImgList.getElementsByTagName('li');

            var LisLen = Lis.length;

            if(LisLen > 1){
                var img = Lis[0].getElementsByTagName('img')[0];

                var imgW = img.width;
                var imgH = img.height;

                for(var i = 1; i < LisLen; i++){
                    var img = Lis[i].getElementsByTagName('img')[0];
                    img.style.width = imgW + 'px';
                    img.style.height = imgH + 'px';
                }
            }

        }


    </script>
</head>
<body>
    <h2 class = "tc">图片上传及预览</h2>
    <form action="" >
    用户名：<input type="text" name="name"/>
        <div class="select tc" >
            <label for="upload">图片上传及预览</label>
            <input type="file" id = "upload" multiple="multiple" accpet = "image/*" capture = "camera" >
        </div>

        <div class="preview">
            <ul class = "preview_img_list clearfix">

            </ul>
        </div>

        <div class="select_video tc">
            <label for="upload_video">视频上传及预览</label>
            <input type="file" id = "upload_video" accpet = "video/*" capture = "camcorder">
        </div>

        <div class="video_preview">

        </div>

        <div class="submit btn tc">上传</div>
    </form>
</body>
</html>

2.file_preview.php:

<?php
$name = $_POST['name'];
$imgCount = count($_POST['file']);
for ($i = 0; $i < $imgCount; $i++) {
    if(preg_match('/^(data:\s*image\/(\w+);base64,)/',$_POST['file'][$i],$result)){
        $ImageType = $result[2];
        $res = str_replace($result[0],'',$_POST['file'][$i]);
        $filePath = './';
        $fileName = date('Y-m-d',time())."-".time().$name.'.'.$ImageType;
        file_put_contents($filePath.$fileName,base64_decode($res));
    } else {
        return false;
    }
}

扫描二维码关注公众号，回复： 1638734 查看本文章


2.PHP的单个文件上传、多个单文件上传、多文件上传

原文链接：点击打开链接

这里给出 三种方式的统一实现

下面先给出各种方式的文件提交页面：

单个文件上传 upload1.php

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>单文件上传</title>  
  6. </head>  
  7. <body>  
  8.     <form action="doAction5.php" method="post" enctype="multipart/form-data">  
  9.         请选择您要上传的文件：  
  10.         <input type="file" name="myFile"/><br/>  
  11.         <input type="submit" value="上传文件"/>  
  12.     </form>  
  13. </body>  
  14. </html>  

多个单文件上传 upload2.php

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>多个单文件上传</title>  
  6. </head>  
  7. <body>  
  8.     <form action="doAction5.php" method="post" enctype="multipart/form-data">  
  9.         请选择您要上传的文件：<input type="file" name="myFile1"/><br/>  
  10.         请选择您要上传的文件：<input type="file" name="myFile2"/><br/>  
  11.         请选择您要上传的文件：<input type="file" name="myFile3"/><br/>  
  12.         请选择您要上传的文件：<input type="file" name="myFile4"/><br/>  
  13.         <input type="submit" value="上传文件"/>  
  14.     </form>  
  15. </body>  
  16. </html>  

多文件上传 upload3.php

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>多文件上传</title>  
  6. </head>  
  7. <body>  
  8.     <form action="doAction5.php" method="post" enctype="multipart/form-data">  
  9.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  10.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  11.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  12.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  13.         <input type="submit" value="上传文件"/>  
  14.     </form>  
  15. </body>  
  16. </html>  
混合方式文件上传 upload4.php

[html]  view plain  copy
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>混合方式文件上传</title>  
  6. </head>  
  7. <body>  
  8.     <form action="doAction5.php" method="post" enctype="multipart/form-data">  
  9.         请选择您要上传的文件：<input type="file" name="myFile1"/><br/>  
  10.         请选择您要上传的文件：<input type="file" name="myFile2"/><br/>  
  11.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  12.         请选择您要上传的文件：<input type="file" name="myFile[]"/><br/>  
  13.         请选择您要上传的文件：<input type="file" name="myFile[]" multiple="multiple"/><br/>  
  14.         <input type="submit" value="上传文件"/>  
  15.     </form>  
  16. </body>  
  17. </html>  

文件上传处理 doAction5.php

[php]  view plain  copy
  1. <?php  
  2. /** 
  3.  */  
  4. header('content-type:text/html;charset=utf-8');  
  5. include_once 'upload.func.php';  
  6.   
  7. $files = getFiles();  
  8. //print_r($files);  
  9.   
  10. foreach($files as $fileInfo) {  
  11.     $res = uploadFile($fileInfo);  
  12.     echo $res['mes'],'<br/>';  
  13.   
  14.     if(isset($res['dest'])) {  
  15.         $uploadFiles[] = $res['dest'];  
  16.     }  
  17. }  
  18. //过滤掉上传失败的文件  
  19. /** 
  20.  * array_values() 函数返回一个包含给定数组中所有键值的数组，但不保留键名。 
  21.  * 提示：被返回的数组将使用数值键，从 0 开始并以 1 递增。 
  22.  */  
  23. /** 
  24.  * array_filter() 函数用回调函数过滤数组中的值。 
  25.  * 该函数把输入数组中的每个键值传给回调函数。如果回调函数返回 true， 
  26.  * 则把输入数组中的当前键值返回结果数组中。数组键名保持不变。 
  27.  */  
  28. //这里使用array_filter过滤掉数组中的空内容  
  29. if(isset($uploadFiles)) {  
  30.     $uploadFiles=array_filter($uploadFiles);  
  31.   
  32.     print_r($uploadFiles);  
  33. }  


实现文件上传的函数 upload.func.php

[php]  view plain  copy
  1. <?php  
  2. /**
  3.  */  
  4. /** 
  5.  * 构建上传文件信息 
  6.  * @return mixed 
  7.  */  
  8. function getFiles() {  
  9.     $i = 0;  
  10.     foreach($_FILES as $file) {  
  11.         //单文件或者多个单文件上传  
  12.         if(is_string($file['name'])) {  
  13.             $files[$i] = $file;  
  14.             $i++;  
  15.         } //多文件上传  
  16.         elseif(is_array($file['name'])) {  
  17.             foreach($file['name'] as $key=>$val) {  
  18.                 $files[$i]['name'] = $file['name'][$key];  
  19.                 $files[$i]['type'] = $file['type'][$key];  
  20.                 $files[$i]['tmp_name'] = $file['tmp_name'][$key];  
  21.                 $files[$i]['error'] = $file['error'][$key];  
  22.                 $files[$i]['size'] = $file['size'][$key];  
  23.                 $i++;  
  24.             }  
  25.         }  
  26.     }  
  27.     return $files;  
  28. }  
  29.   
  30. /** 
  31.  * 获取文件扩展名 
  32.  */  
  33. function getExt($filename) {  
  34.     return strtolower(pathinfo($filename,PATHINFO_EXTENSION));  
  35. }  
  36.   
  37. /** 
  38.  * 获取唯一字符串 
  39.  */  
  40. function getUniName() {  
  41.     return md5(uniqid(microtime(true), true));  
  42. }  
  43.   
  44. /** 
  45.  * 针对于单文件、多个单文件、多文件的上传 
  46.  * @param array $fileInfo 
  47.  * @param string $path 
  48.  * @param bool $flag 
  49.  * @param int $maxSize 
  50.  * @param array $allowExt 
  51.  * @return array 
  52.  */  
  53. function uploadFile($fileInfo, $path='./uploads',$flag=true,$maxSize=1048576,$allowExt = array('jpeg','jpg','gif','png')) {  
  54.     //$allowExt = array('jpeg','jpg','gif','png');  
  55.     //$flag = true;  
  56.     //$maxSize = 1048576; //1M  
  57.   
  58.     $res = array();  
  59.   
  60.     //判断错误号  
  61.     if($fileInfo['error'] == UPLOAD_ERR_OK) {  
  62.         //检测上传文件的大小  
  63.         if($fileInfo['size'] > $maxSize) {  
  64.             $res['mes'] = $fileInfo['name'] . '上传文件过大';  
  65.         }  
  66.   
  67.         $ext = getExt($fileInfo['name']);  
  68.         //检测上传文件的文件类型  
  69.         if(!in_array($ext, $allowExt)) {  
  70.             $res['mes'] = $fileInfo['name'] . '非法文件类型';  
  71.         }  
  72.   
  73.         //检测是否是真是的图片类型  
  74.         if($flag) {  
  75.             if(!getimagesize($fileInfo['tmp_name'])) {  
  76.                 $res['mes'] = $fileInfo['name'] . '不是真实图片类型';  
  77.             }  
  78.         }  
  79.   
  80.         //检测文件是否是通过HTTP POST上传上来的  
  81.         if(!is_uploaded_file($fileInfo['tmp_name'])) {  
  82.             $res['mes'] = $fileInfo['name'] . '文件不是通过HTTP POST方式上传上来的';  
  83.         }  
  84.   
  85.         if($res) return $res;  
  86.   
  87.         //$path = './uploads';  
  88.         if(!file_exists($path)) {  
  89.             mkdir($path, 0777, true);  
  90.             chmod($path, 0777);  
  91.         }  
  92.         $uniName = getUniName();  
  93.         $destination = $path . '/' . $uniName . '.' . $ext;  
  94.         if(!move_uploaded_file($fileInfo['tmp_name'],$destination)) {  
  95.             $res['mes'] = $fileInfo['name'] . '文件移动失败';  
  96.         }  
  97.   
  98.         $res['mes'] = $fileInfo['name'] . '上传成功';  
  99.         $res['dest'] = $destination;  
  100.   
  101.         return $res;  
  102.     } else {  
  103.         //匹配错误信息  
  104.         switch($fileInfo['error']) {  
  105.             case 1:  
  106.                 $res['mes'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';  
  107.                 break;  
  108.             case 2:  
  109.                 $res['mes'] = '超过了表单MAX_FILE_SIZE限制的大小';  
  110.                 break;  
  111.             case 3:  
  112.                 $res['mes'] = '文件部分被上传';  
  113.                 break;  
  114.             case 4:  
  115.                 $res['mes'] = '没有选择上传文件';  
  116.                 break;  
  117.             case 6:  
  118.                 $res['mes'] = '没有找到临时目录';  
  119.                 break;  
  120.             case 7:  
  121.             case 8:  
  122.                 $res['mes'] = '系统错误';  
  123.                 break;  
  124.         }  
  125.         return $res;  
  126.     }  
  127. }  



php的web开发中关于上传文件的几种方法的总结

在php的web开发中，文件，图片，视频的上传是一个经常要用到的功能，而且涉及的知识面比较广，下面从几个不同的角度和技术层面来做一个详细的说明和总结。

注意：

在总结之前，请大家务必了解php.ini中的几个关于上传的关键配置值。

1.file_uploads 
设为On，允许通过HTTP上传文件 
2.upload_tmp_dir 
文件上传至服务器时用于临时存储的目录，如果没指定，系统会使用默认的临时文件夹（我的机器是/tmp）。

3.upload_max_filesize 
允许上传文件大小的最大值，默认为2M。

4.post_max_size 
Php可接收的post数据的最大值（包括表单里的所有值的总合），默认为8M。 
5.memory_limit 
每个php所最占的最大内存数，这个值要大于允许上传的文件大小。

6.max_execution_time 
每个php运行的最长时间（秒），默认30秒。

7.max_input_time 
Php解析POST/GET数据的最长时间（秒），默认60秒。This sets the maximum time in seconds a scripts is allowed to parse input data, like POST and GET.It is measured from the mement of receiving all data on the server to the start of script execution.

其中很重要的是upload_max_filesize  和post_max_size 、memory_limit 必须要按照上传的文件设置合适，否则无法上传。

一、传统的php写的上传类。

写一个php的上传类，这个方法用到的知识全部是php的，而且技术的难点也不多。

     <form method="post" action="upload.php" enctype="multipart/form-data">   
     <table border=0 cellspacing=0 cellpadding=0 align=center width="100%">  

<input type="hidden" name="MAX_FILE_SIZE" value="2000000">//隐藏域。这里name必须设置成MAX_FILE_SIZE，其值就是上传文件的最大长度，单位是B，这里我限制成2M
    <input name="file" type="file"  value="浏览" >              
        < input type="submit" value="上传" name="B1">   
     </table>   
     </form> 

服务端利用php的$_FILES['file']['name']来获取文件后缀名，具体的代码自己查找资料看看，这里就不多说了。

总结;这个方法可以用来上传小于2M的文件或者是图片，基本的功能可以实现。

二、利用uploadify插件

这个是利用Jquery的上传插件，上传可以带进度条，容易配置。

官网：http://www.uploadify.com/，可以下载资料和文档，里面的各个参数的详解都很清楚，而且还有php的demo，参考一下就可以很快的开发。

总结：可以上传一些大文件，和图片，而且带进度条，可以多文件上传，在WEB中会经常用。


三、利用百度的webupload

WebUploader 是由 Baidu FEX 团队开发的一款以 HTML5 为主，FLASH 为辅的现代文件上传组件。在现代的浏览器里面能充分发挥 HTML5 的优势，同时又不摒弃主流IE浏览器，沿用原来的 FLASH 运行时，兼容 IE6+，iOS 6+, android 4+。采用大文件分片并发上传，极大的提高了文件上传效率。

官网：http://fex.baidu.com/webuploader/  同时网上也有很多的资料，不过开发起来会比较难一点，但是可以上传几个G的视频，还有上传图片可以预览，功能是非常强大的，只是开发的难度稍微大点。官网上也有demo，大家可以看看，试试。


四、swfupload的插件

这是一个jquery的上传插件，功能也非常强大，开发也比较容易，网上有很多的资料，大家可以自行查找。



总结：在web的开发中，本人建议可以使用uploadify和webupload这两个，真的很好用。

原文链接： 点击打开链接


[php] 3个多文件上传(uploadify、file upload、 webuploader)

多文件上传的插件常用的有：

1、jquery uploadify  下载【http://www.uploadify.com/download/】

2、jquery file upload 下载【https://github.com/blueimp/jQuery-File-Upload/tags】

3、webuploader 下载【http://fex.baidu.com/webuploader/download.html】

注：

在使用的时候，要参照官网的文档说明，如果看不明白，可以百度一下想知道的，必境我这里只是入门的小实例


一、jquery uploadify

该插件已经把文件写好了（index.php和uploadify.php），下载后改下上传路径就行了，这里没什么要讲的


二、jquery file upload 以Thinkphp为例 Home模块下的Index控制器

布局文件index.html：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/bootstrap.min.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>

    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="__PUBLIC__/jqupload/css/jquery.fileupload-ui.css">
    <script src="__PUBLIC__/jqupload/js/vendor/jquery.ui.widget.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.fileupload.js"></script>
    <script src="__PUBLIC__/jqupload/js/jquery.iframe-transport.js"></script>
</head>
<body>
    <div class="container">
        <div class="row fileupload-buttonbar" style="padding-left:15px;">
            <div class="thumbnail col-sm-6">
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="10" aria-valuemax="100" aria-valuenow="0"><div id="weixin_progress" class="progress-bar progress-bar-success" style="width:0%;"></div></div>
                <div class="caption" align="center">
                    <span id="weixin_upload" class="btn btn-primary fileinput-button">
                    <span>上传</span>
                    <input type="file" id="weixin_image" name="weixin_image[]" data-url="__CONTROLLER__/uploadImg" multiple>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function() {
            $("#weixin_image").fileupload({
                dataType: 'json',
                acceptFileTypes:  /(\.|\/)(gif|jpe?g|png)$/i,  // 文件上传类型
                sequentialUploads: true,  // 连续上传配置
                add: function (e, data) {
                    //提交到服务器端
                    data.submit();
                }
            }).bind('fileuploadprogress', function (e, data) {  // 绑定上传进度
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $("#weixin_progress").css('width',progress + '%');
                $("#weixin_progress").html(progress + '%');
            }).bind('fileuploaddone', function (e, data) {  // 上传完成处理
                $("#weixin_upload").css({display:"none"});
                $('.thumbnail').prepend('<img src="'+data.result+'" style="height:180px;margin-top:10px;margin-bottom:8px;" alt="图片" data-holder-rendered="true">');
            });
        });
    </script>
</body>
</html>

Index控制器下的uploadImg方法

/* 文件上传处理 */
public function uploadImg(){
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    //$upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =      './Public/Uploads/'; // 设置附件上传根目录
    $upload->savePath  =      ''; // 设置附件上传（子）目录
    $upload->autoSub = false;  // 关闭子目录

    // 上传文件
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
    }else{// 上传成功 获取上传文件信息
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}

三、webuploader (也是以Thinkphp为例) 可以多文件多图片大文件上传



HTML布局：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>webuploader</title>
    <link rel="stylesheet" href="__PUBLIC__/webuploader/webuploader.css"/>
    <script src="__PUBLIC__/jquery.min.js"></script>
    <script src="__PUBLIC__/webuploader/webuploader.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 15px;
            font-size: 12px;
            color: #fff;
            text-align: center;
            line-height: 15px;
        }
        .uploader-list .file-item {
            position: relative;
        }
        .progress span {
            display: inline-block;
            height: 100%;
            background: #1C9F09;
        }
    </style>
</head>
<body>
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>
</body>
</html>

JS脚本：

<script>
    // 图片上传demo
    jQuery(function() {
        var $ = jQuery,
        $list = $('#fileList'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

        // 缩略图大小
        thumbnailWidth = 100 * ratio,
        thumbnailHeight = 100 * ratio,

        // Web Uploader实例
        uploader;

        // 初始化Web Uploader
        uploader = WebUploader.create({

            // 自动上传。
            auto: true,

            // swf文件路径
            swf: '__PUBLIC__/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: '__CONTROLLER__/webuploader',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',

            // 只允许选择文件，可选。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        // 当有文件添加进来的时候
        uploader.on( 'fileQueued', function( file ) {
            var $li = $(
                            '<div id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info">' + file.name + '</div>' +
                            '</div>'
                    ),
                    $img = $li.find('img');

            $list.append( $li );

            // 创建缩略图
            uploader.makeThumb( file, function( error, src ) {
                if ( error ) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr( 'src', src );
            }, thumbnailWidth, thumbnailHeight );
        });

        // 文件上传过程中创建进度条实时显示。
        uploader.on( 'uploadProgress', function( file, percentage ) {
            var $li = $( '#'+file.id ),
                $percent = $li.find('.progress span');

            // 避免重复创建
            if ( !$percent.length ) {
                $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
            }

            $percent.css( 'width', percentage * 100 + '%').text(percentage * 100+'%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on( 'uploadSuccess', function( file ) {
            console.log(file);
            $( '#'+file.id ).addClass('upload-state-done');
        });

        // 文件上传失败，现实上传出错。
        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.text('上传失败');
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on( 'uploadComplete', function( file ) {
//            $( '#'+file.id ).find('.progress').remove();
        });
    });
</script>

PHP代码：

public function webuploader() {
    $upload = new \Think\Upload();// 实例化上传类
    $upload->maxSize   =     3145728 ;// 设置附件上传大小
    $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
    $upload->rootPath  =      './Public/Uploads/'; // 设置附件上传根目录
    $upload->savePath  =      ''; // 设置附件上传（子）目录
    $upload->autoSub = false;  // 关闭子目录

    // 上传文件
    $info   =   $upload->upload();
    if(!$info) {// 上传错误提示错误信息
        $this->error($upload->getError());
    }else{// 上传成功 获取上传文件信息
        $pathArr = array();
        foreach($info as $file){
            array_push($pathArr, "Public/Uploads/".$file['savepath'].$file['savename']);
        }
        echo json_encode($pathArr);
    }
}
原文链接：点击打开链接 

PHP百度diyUpload多图上传插件实例

在开发过程中经常需要用到多图上传的插件，最近发现前端找的这个diyUpload就不错，于是就整理了一个实例，仅供参考！

使用该插件，首先需要引入必要的css和js:

1

然后在需要用到该插件的地方，加入一个div：

<div id=”box”>
<div id=”test”></div> <!–上传控件按钮–>
</div>

接着把调用的js写上：

<script type=”text/javascript”>
/*
* 服务器地址,成功返回,失败返回参数格式依照jquery.ajax习惯;
* 其他参数同WebUploader  
*/
$(‘#test’).diyUpload({
url : ‘fileupload.php’, //这个是文件上传处理文件 用框架的请对应文件上传的控制器
//formData: { _token: “{{csrf_token()}}”}, //Laravel 框架下需要 csrf_token 才能上传，可以在 formData 里面添加需要带过去的参数
dataType:”json”,
success : function(data) {
console.info(data);
if(data.status == 1){
var span =$(“<input type=’hidden’ value='”+data.imagepath+”‘ name=’img[]’>”);//将上传后保存的路径返回 通过隐藏域放进表单里面
$(“#test”).append(span);
}

},
error : function(err) {
console.info(err);
}
});
</script>

就这三步就可以上传图片了，最后就是服务端的文件上传处理了。fileupload.php 就是图片上传的处理文件，根据自己的业务逻辑把临时文件夹的图片保存到自己的网站目录。

（注：这个多图上传的服务端处理文件是每个图片上传后都会被调用一次的。）

例子源码地址：http://pan.baidu.com/s/1crH3EA

原文链接： 点击打开链接

猜你喜欢

转载自blog.csdn.net/weixin_37770023/article/details/80398857
今日推荐
周排行
word2Vec基础背景知识
Linux rsync实现断点续传
CNCF Dan Kohn：云原生将会在中国快速发展
知识图谱学习笔记(2)---为什么要知道知识图谱？什么是知识图谱？
table点击一行任意位置选中该行的radio按钮
(摘)springboot 配置文件
46464644
【String-easy】541. Reverse String II 反转的元素，有反转个数和间隔
微信小程序操作dom元素节点 wx.createSelectorQuery()
十年目のバレンタインデー　　　002
每日归档
更多
2024-07-19(0)
2024-07-18(0)
2024-07-17(0)
2024-07-16(0)
2024-07-15(0)
2024-07-14(0)
2024-07-13(0)
2024-07-12(0)
2024-07-11(0)
2024-07-10(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022