[PHP] 3 multiple file uploads (uploadify, file Upload, Webuploader) _

[PHP] 3 multiple file uploads (uploadify, file Upload, Webuploader) __web

Last Update:2018-07-30 Source: Internet

Author: User

Tags jquery file upload

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Multi-File Upload plug-ins are commonly used:

1, jquery uploadify download "http://www.uploadify.com/download/"

2, jquery file upload download "Https://github.com/blueimp/jQuery-File-Upload/tags"

3, Webuploader download "http://fex.baidu.com/webuploader/download.html"

Note:

In the use of the time, to refer to the official website of the documentation, if you do not understand, you can Baidu want to know, will I here is just a small example of getting started

First, jquery uploadify

The plugin has been written to the file (index.php and uploadify.php), download and then change the upload path on the line, there is nothing to talk about

Two, jquery file upload take thinkphp as example the index controller under the home module

Layout file index.html:

<!doctype html>  

 

The Uploadimg method under the index controller


/* File upload processing/public
function uploadimg () {
    $upload = new \think\upload ()//materialized upload class
    $upload->maxsize   =     3145728//Set attachment upload size
    //$upload->exts      =     Array (' jpg ', ' gif ', ' PNG ', ' jpeg ');//Set attachment upload type
    $ Upload->rootpath  = '      ./public/uploads/';//Set up attachment upload root directory
    $upload->savepath  =      '; Set attachment upload (sub) directory
    $upload->autosub = false;  Close subdirectory

    //upload file
    $info   =   $upload->upload ();
    if (! $info) {//Upload error message error messages
        $this->error ($upload->geterror ());
    } else{//Upload successfully uploaded file information
        $pathArr = Array ();
        foreach ($info as $file) {
            Array_push ($PATHARR, "public/uploads/". $file [' Savepath ']. $file [' savename ']);
        echo Json_encode ($PATHARR);
    }
} 

 

Third, Webuploader (also take thinkphp as an example) can be more than file pictures large file Upload





HTML Layout:


<! DOCTYPE html>  

 

JS script:


<script>//Photo Upload demo jquery (function () {var $ = jquery, $list = $ (' #fileList '),// Optimized retina, under Retina This value is 2 ratio = Window.devicepixelratio | | 1,//thumbnail size Thumbnailwidth = ratio, Thumbnailheight = * ratio,//Web Uploader

        Example uploader;
            Initialize Web Uploader Uploader = webuploader.create ({//automatically uploaded.
            Auto:true,//swf file path swf: ' __public__/webuploader/uploader.swf ',//File receive server. Server: ' __controller__/webuploader ',//Select File button.
            Optional.
            The interior is created according to the current run, possibly an INPUT element, or it may be flash.
            Pick: ' #filePicker ',//Only allow selection of files, optional. Accept: {title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes:

        ' image/* '}}); When a file is added Uploader.on (' filequeued ', function (file) {VAR $li = $ (' <div id= ' + file.id + ' "class=" File-item thumbnail ">" +
                            '  ' + ' <div class= ' info ' > ' + file.name + ' </div> ' +

            ' </div> ', $img = $li. Find (' img ');

            $list. Append ($li);
                    Create thumbnail uploader.makethumb (file, function (Error, SRC) {if (error) {
                    $img. ReplaceWith (' <span> cannot preview </span> ');
                Return
            $img. attr (' src ', src);
        }, Thumbnailwidth, thumbnailheight);

        });
        The file upload process creates a progress bar to display in real time. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' +file.id), $per

            cent = $li. Find ('. Progress span '); Avoid duplicating the IF (! $percent. length) {$percent = $(' <p class= ' progress ' ><span></span></p> '). Appendto ($li)
            . Find (' span ');
        $percent. css (' width ', percentage * + '% '). Text (percentage * 100+ '% ');

        }); File upload Success, add success class to item, with

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More