php+WebUploader 이미지 일괄 업로드

一.webuploader

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

2. 웹업로더 업로드 원칙

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

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

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

<input>

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

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

   nbsp;html>
   
   
       <meta>
       <meta>
       <title>WebUploader演示</title>
       <link>
       <link>
       <link>
   
   
   
       <div>选择文件</div>
       <button>上传</button>
       <div></div>
       <div></div>
       
   <!--jquery 1.12-->
   <script></script>
   <!--bootstrap核心js文件-->
   <script></script>
   <!--webuploader js-->
   <!--<script type="text/javascript" src="static/jquery.js"></script>-->
   <script></script>
   <script></script>
   
   

파일 업로드 태그를 지정하고 업로드 제출 버튼을 클릭하면 파일을 서버에 업로드할 수 있습니다.

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

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

PHP+HTML 양식 업로드 파일

1. 2. Webuploader 업로드 원칙

php+html 양식 업로드를 사용하면 파일 업로드 작업이 완료될 수 있지만 단점은
파일 업로드시 페이지 전체를 제출해야 페이지가 새로고침됩니다

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

1. webuploader는 이 두 가지 문제를 해결합니다. Webuploader는 Ajax 기술을 사용하여 업로드할 때 페이지를 제출할 필요가 없습니다. 업로드 결과를 모니터링하고 페이지 및 미리보기 이미지에 대한 피드백을 제공하세요. 몇 단계만 거치면 이미지를 업로드할 수 있습니다.

2. 프런트 엔드 HTML 페이지 구성 webuploader

3. 백엔드 서버 PHP 페이지는 webuploader에서 업로드된 이미지를 수락한 다음 처리합니다.

4. 백그라운드에서 이미지 처리 후 json 데이터를 프런트에 반납합니다.

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

3. 웹업로더 구성 및 사용

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

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

내 폴더의 디렉터리

#🎜🎜 ## 🎜🎜#
• index.php

• upload_img.php

• mywebupload.js #🎜 🎜#

webuploader/
uploads/

• # 🎜 🎜# 1. 프론트 엔드 HTML 페이지는 webupload를 구성합니다

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

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

1. HTML 태그 생성

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

3. 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  src="/static/imghwm/default1.png" data-src="' + ret + '" class="lazy" alt="php+WebUploader 이미지 일괄 업로드" >';
                   $('.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>')
           }
       });
   })

mywebupload.js

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

1. 업로드된 폴더에 대한 권한을 설정해야 합니다. Linux는 chmod를 사용하여 폴더 권한을 수정할 수 있습니다. 그렇지 않으면 업로드가 실패합니다.

2. 여기서의 처리 방법은 비교적 간단합니다. 궁금한 점이 있으면 메시지를 남겨주세요.
   upload_img.php
rrreee

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

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

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