webupload teaches you how to upload large files

This article shares three different examples of webupload uploading large files: file upload, image upload and html5 drag and drop image upload. This can be applied to mobile phone uploads.
//Upload pictures<br> // Initialize Web Uploader<br> var uploader = WebUploader.create({<br> <br> // Whether to automatically upload the file after selecting it. <br> auto: true,<br> <br> // swf file path<br> swf: 'js/Uploader.swf',<br> <br> // File receiving server. <br> Server: 'upload.php',<br> <br> //Button to select file. Optional. <br> // Internally created based on the current operation, it may be an input element or flash.<br> Pick: '#imgPicker',<br> <br> // Only allow selection of image files. <br> Accept: {<br>          title: 'Images',<br>          extensions: 'gif,jpg,jpeg,bmp,png',<br>         mimeTypes: 'image/*'<br> }<br> });<br> <br> //When a file is added<br> uploader.on( 'fileQueued', function( file ) {<br> var $list = $("#fileList"),<br>         $li = $(<br> '<div id="' + file.id + '" class="file-item thumbnail">' +<br> ‘<img alt="webupload teaches you how to upload large files" >’ +<br> ‘<div class="info">' + file.name + '</div>' +<br>                 '</div>'<br> ),<br>          $img = $li.find('img');<br> <br> <br> // $list is the container jQuery instance<br> $list.append( $li );<br> <br> //Create thumbnail <br> // If it is a non-image file, you do not need to call this method. <br> // thumbnailWidth x thumbnailHeight is 100 x 100<br> uploader.makeThumb( file, function( error, src ) {<br>            if ( error ) {<br>                 $img.replaceWith('<span>cannot preview</span>');<br>                  return;<br>         }<br> <br>          $img.attr( 'src', src );<br> }, 100, 100 );<br> });webupload real-time drag upload demonstration: http://www.sucaihuo.com/js/901.html

Powerful file upload plug-in with upload progress-WebUploader.zip ( 188.94 KB Download: 21 times )