php+WebUploader 이미지 일괄 업로드-PHP 튜토리얼-php.cn

一.webuploader

2. 웹업로더 업로드 원칙

1. PHP+HTML 양식 업로드 파일

집

백엔드 개발

PHP 튜토리얼

php+WebUploader 이미지 일괄 업로드

步履不停

Jun 19, 2019 am 10:24 AM

php

php+WebUploader 이미지 일괄 업로드

一.webuploader

webuploader는 주로 파일을 만드는 데 사용됩니다. 업로드는 일괄 업로드와 이미지 미리보기를 지원합니다. 이미지 미리보기는 이미지에서 base64 데이터를 생성하여 php+WebUploader 이미지 일괄 업로드 태그에 직접 사용하는 방식이므로 실제로 이미지를 업로드하기 전에 업로드 효과를 확인할 수 있는 효과가 있습니다. . 더 자세한 소개를 보려면 webuploader 공식 웹사이트를 방문하세요. 저는 항상 공식 웹사이트 문서를 읽는 것이 가장 직접적인 학습 방법이라고 믿습니다. webuploader 공식 웹사이트 그런데 webuploader는 Baidu Fex 팀 팀에서 관리합니다.

2. 웹업로더 업로드 원칙

1. PHP+HTML 양식 업로드 파일

이에 대해 이야기하기 전에 먼저 PHP 파일 업로드에 대한 이해가 필요합니다. 방법, 업로드는 두 부분으로 나누어집니다

먼저 html을 통해 <form> 양식을 만들고 <form>表单，在表单中添加

<input type=&#39;file&#39; name=&#39;xxx&#39;>

로그인 후 복사

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

到了服务器端，接收到的上传文件会被存储在php指定的临时文件夹中，利用PHP的内置函数move_uploaded_file()#🎜를 추가합니다. 🎜#

<!doctype html>
<html>
<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></div>
    <div></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>

로그인 후 복사

서버 측에서는 수신된 업로드 파일은 PHP 내장 함수 move_uploaded_file()을 사용하여 PHP에서 지정한 임시 폴더에 저장됩니다. code>에서 임시 파일을 원하는 대상 폴더로 이동하면 됩니다. 이 과정에서 파일 이름을 바꾸고, 크기를 조정하여 조건을 충족하는지 등을 확인하면 업로드가 완료됩니다.

완전한 PHP 양식 업로드 사례는 w3school에서 이 기사를 읽을 수 있으므로 여기서는 자세히 설명하지 않겠습니다.

PHP+HTML 양식 업로드 파일

2. Webuploader 업로드 원칙

#🎜🎜 #사진업로드는 이미지를 미리 볼 수 있는 방법이 없기 때문에 잘못된 이미지를 업로드한 경우 실제로 이미지가 업로드될 때까지 기다렸다가 페이지를 새로 고쳐야 확인할 수 있는 경우가 있습니다.

webuploader는 이 두 가지 문제를 해결합니다. Webuploader는 Ajax 기술을 사용하여 업로드할 때 페이지를 제출할 필요가 없습니다. 업로드 결과를 모니터링하고 페이지 및 미리보기 이미지에 대한 피드백을 제공하세요. 몇 단계만 거치면 이미지를 업로드할 수 있습니다.
프런트 엔드 HTML 페이지 구성 webuploader
백엔드 서버 PHP 페이지는 webuploader에서 업로드된 이미지를 수락한 다음 처리합니다.
백그라운드에서 이미지 처리 후 json 데이터를 프런트에 반납합니다.

여기서 이야기해보겠습니다. 배경 PHP가 이미지를 수신하고 처리하는 것은 기본적으로 PHP+HTML 양식 업로드와 동일합니다.

3. 웹업로더 구성 및 사용

모든 구성 매개변수 및 사용 방법은 공식 문서에서 확인할 수 있습니다. webuploader 공식 홈페이지, webuploader github 저장소에 참고용으로 몇 가지 예시 사례가 있습니다. example

내 실행 환경: php5.6+nginx+macOS

내 폴더의 디렉터리

index.php
upload_img.php
mywebupload.js #🎜 🎜#
# 🎜 🎜# 1. 프론트 엔드 HTML 페이지는 webupload를 구성합니다

주로 다음 단계를 수행합니다.

webuploader의 관련 js 및 css 패키지를 소개합니다# 🎜 🎜#

HTML 태그 생성
js 파일 생성 및 웹업로더 초기화는 다음과 같습니다. webuploader 폴더는 모두 github에서 옮겨온 것인데, 그런 다음 페이지 경험을 향상시키기 위해 jquery도 사용했습니다.

index.html

$(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="&#39; + ret + &#39;" />';
                $('.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>')
        }
    });
})

로그인 후 복사

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

로그인 후 복사

2. 백그라운드 PHP 페이지# 🎜 🎜#

여기서 주의할 점이 두 가지 있습니다:

백그라운드에서 처리되는 PHP 파일의 파일 이름은 웹업로더 실행 시와 동일해야 합니다. 구성되어 있습니다.