집 > 기사 > 백엔드 개발 > php+WebUploader 이미지 일괄 업로드

php+WebUploader 이미지 일괄 업로드

步履不停원래의: 2019-06-19 10:24:553920검색

一.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 파일의 파일 이름은 웹업로더 실행 시와 동일해야 합니다. 구성되어 있습니다.

업로드된 폴더에 대한 권한을 설정해야 합니다. Linux는 chmod를 사용하여 폴더 권한을 수정할 수 있습니다. 그렇지 않으면 업로드가 실패합니다.
여기서의 처리 방법은 비교적 간단합니다. 궁금한 점이 있으면 메시지를 남겨주세요.
upload_img.php

위는 webuploader의 전체 내용입니다. 자세한 webuploader 매개변수 설정 및 이벤트는 webuploader 공식 홈페이지를 참조하세요. 모두가 의견과 수정 사항을 교환할 수 있는 메시지를 더 많이 남겨주시길 바랍니다.

PHP 관련 기술 기사를 더 보려면 PHP Tutorial 칼럼을 방문하여 알아보세요!

위 내용은 php+WebUploader 이미지 일괄 업로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php nginx json jquery css ajax html JS 事件 github macos linux

성명：

이전 기사：PHP 내장 웹 서버다음 기사：PHP 내장 웹 서버