Shulou(Shulou.com)06/03 Report--

This article mainly introduces HTML5 can preview multiple pictures how to use Ajax upload, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

First, about uploading pictures and so on.

In the era of XHTML, we could only upload one picture at a time using the HTML file control. To upload more than one image at a time, with the help of flash. For example, swfupload.js. Unfortunately, using complex points, such as the flash file needs to be in the same parent folder as the page, the JavaScript file size is also considerable.

I have previously translated and edited an article entitled "Ajax Upload multi-file upload plug-in". The highlight of this plug-in is to use hidden iframe frame pages to simulate ajax uploads, but in fact, you can only upload one image at a time, which can be uploaded multiple times.

II. Demo page

If the browser you have is the latest FireFox or Chrome browser, you can click here: HTML5-based multi-image Ajax upload demo

On the demo page, you can click the file control to upload multiple images, as shown below (FireFox 6 screenshot, the same below):

If there is a non-image file or the image size is too large, a prompt will pop up:

Or you can drag the picture on the desktop directly to the area where you accept the drag:

After the release, the image can be previewed directly (it has not been uploaded to the server at this time):

At this time, the picture can be deleted in advance, or it can be uploaded directly. For example, we click the upload button, and soon, the picture is uploaded successfully:)!

The uploaded page address is returned, as follows:

At this point, you will have the picture under the corresponding upload folder:

Note: my blog space is limited, I will regularly clean up the picture folder, so, you do not regard this as a free photo hosting place.

Third, a simple analysis of the core skeleton script

The first is a core file uploaded by the file, which was slowly sorted out in the previous two nights. The file name is: zxxFile.js (right-click... Download)

This file is only a few K, hundreds of lines of code, mainly responsible for file upload related logic (selection, deletion, etc.), native JS, therefore, compatible with jQuery,YUI, MooYools and so on. ZxxFile.js is actually a small skeleton file, flesh and so on need to be added separately.

ZxxFile.js is really just a small object:

Var ZXXFILE = {/ / skeletons.}

The following table shows the properties (skeleton) of the ZXXFILE object and its corresponding content meaning, and so on.

Note: the file parameter mentioned many times above refers to the file object object, whose attribute values are name, size, type, etc., and then, in zxxFile.js, there is a convenient index index attribute for element positioning.

Obviously, only the skeleton can hardly do anything. The reason why the demo page is effective is that it adds flesh and blood according to the above skeleton according to the actual needs. You can directly "right-view page source code" to see all the relevant JavaScript. Or watch me talk about it a little bit.

We follow the skeleton in the table above. Demo pages borrow the more popular jQuery library, skeleton + flesh and blood = plug-ins, of course, demo pages are not for plug-ins (although only slightly modified), because the UI of the page is obviously not enough for plug-ins. In other words, you can write your own HTML5-based multi-file Ajax upload plug-in by using the zxxFile.js skeleton and the JavaScript library with your own attributes.

4. Some code of demo page

The overall logic of the demo page code is as follows:

Var params = {/ / flesh and blood}; ZXXFILE = $.extend (ZXXFILE, params); ZXXFILE.init ()

FileInput

The first is the file control element, as follows:

FileInput: $("# fileImage") .get (0)

Because it is a DOM element, the get method of jQuery is applied. The following two parameters are the same.

The file control element in the demo page supports multiple file selections, and the hidden trick is the bright red highlight in the following code:

DragDrop and upButton

Drag and drop area and upload button (hidden by default):

DragDrop: $("# fileDragArea"). Get (0), upButton: $("# fileSubmit") .get (0)

Url

Ajax upload address, there is nothing to say, take the action address of the form:

Url: $("# uploadForm") .attr ("action")

Filter method

Filter the selected file. File controls can choose any file, but the demo; space related to image upload on demo pages is limited, so it is better to block oversized images. Obviously, you need to filter the uploaded files. So, you have the following filtering script:

Filter: function (files) {var arrFiles = []; for (var I = 0, file; file = files [I]; iTunes +) {if (file.type.indexOf ("image") = = 0) {if (file.size > = 512000) {alert ('your' + file.name +'"picture is too large, should be less than 500k');} else {arrFiles.push (file) }} else {alert ('file' + file.name +'"is not a picture.') ;}} return arrFiles;}

ZxxFile.js automatically integrates the filtered list of file objects for accurate upload.

OnSelect method

The method to be executed after the file (here is the picture) is selected. In this example page, the main task of the onSelect method is to preview the local image in the browser. The core script previewed in the browser before the local image is uploaded is:

Var reader = new FileReader (), htmlImage;reader.onload = function (e) {htmlImage ='

';} reader.readAsDataURL (file)

In this demo page, the partial completion script is as follows, although it seems to be of some length, the content is just to load some HTML code:

OnSelect: function (files) {var html ='', I = 0; / waiting to load gif animation $("# preview"). Html ('); var funAppendImage = function () {file = files [I]; if (file) {var reader = new FileReader () reader.onload = function (e) {html = html +'

'+ file.name +' + 'delete' +'

'+' +'; iTunes; funAppendImage ();} reader.readAsDataURL (file);} else {/ / Image-related HTML fragments are loaded into $("# preview") .html (html) If (html) {/ / delete method $(".delete _ delete") .click (function () {ZXXFILE.funDeleteFile (files [parseInt ($(this) .attr ("data-index")]); return false;}); / / submit button displays $("# fileSubmit") .show () } else {/ / submit button hides $("# fileSubmit") .hide ();}}; / / executes the human funAppendImage () of the picture HTML fragment;}

If you are careful, you may find that the index I is basically used in the above HTML elements to facilitate subsequent deletion to find the corresponding elements.

Then, one more thing to note is the delete event-- the ZXXFILE.funDeleteFile () method is executed, which is necessary to actually remove the picture from the file list and to trigger the callback of the onDelete method.

OnDelete method

The flying method is executed when the picture is uploaded or deleted. This example is to make it fade:

OnDelete: function (file) {$("# uploadList_ + file.index). FadeOut ();}

OnDragOver method

The method to be executed when the file is dragged onto the drag element. In this example, a class name is added, as follows:

OnDragOver: function () {$(this) .addClass ("upload_drag_hover");}

OnDragLeave method

The method executed when the file is removed from the element. In this example, a class name is removed, as follows:

OnDragLeave: function () {$(this) .addClass ("upload_drag_hover");}

OnProgress method

The method of triggering in the upload. The demo effect is that there is a black translucent background element with rounded corners in the upper left corner of the image, in which the percentage value is increasing. Code:

OnProgress: function (file, loaded, total) {var eleProgress = $("# uploadProgress_" + file.index), percent = (loaded / total * 100) .tofixed (2) +'%'; eleProgress.show () .html (percent);}

OnSuccess method

The method to be executed after the current picture is uploaded successfully. This demo is the image address information returned by the prompt:

OnSuccess: function (file, response) {$("# uploadInf") .append (""

Uploaded successfully. The image address is "+ response +".

");}

OnFailure method

The way to pee when the picture is uploaded. This demo is a hint, and then the picture is shallow and transparent:

OnFailure: function (file) {$("# uploadInf") .append ("

Failed to upload picture "+ file.name +"!

"); $(" # uploadImage_ "+ file.index) .css (" opacity ", 0.2);}

OnComplete method

After all the images have been uploaded, this example page sets the value of the file control to blank, while the button hides:

OnComplete: function () {/ / submit button hides $("# fileSubmit") .hide (); / / file control value leaves $("# fileImage") .val (""); $("# uploadInf") .append ("

After all the pictures have been uploaded, you can continue to add and upload them.

");}

PHP page related code

$fn = (isset ($_ SERVER ['HTTP_X_FILENAME'])? $_ SERVER [' HTTP_X_FILENAME']: false); if ($fn) {file_put_contents ('uploads/'. $fn, file_get_contents ('php://input')); echo "http://www.zhangxinxu.com/study/201109/uploads/$fn"; exit ();}

These are the main functions or interactive code. As for the CSS style section and some details in the HTML code, I don't bother to pick up sesame seeds. If you are interested, you can watch it by looking at the source code.

5. The scope of application of Ajax upload of HTML5 files

Not only IE browsers don't support it, but the latest Safari browsers under win or Opera do not fully support HTML5's previewable multi-image Ajax upload, so why are we learning this? At least there is no bird for now.

Indeed, for some of our external projects, it is too early to use this technology for web pages used by a large number of users. However, for the company's intranet project, apply this absolute OK. I found a very strange problem. Most of the time, intranet pages support lower versions of IE, but not for modern browsers. This is totally on the wrong path.

Recently, our company began to change the intranet project, began to develop intranet based on modern browsers such as Chrome (of course, IE browsers can also be used), internal staff mandatory use of Chrome browsers. As far as our company is concerned, the response is very good, whether it is the UI effect, interaction or speed experience.

Obviously, at least in our company, if we want to do a multi-picture upload function for intranet editors or small secretaries in the future, we can directly use HTML5 files to upload, which is what this article says. Simple, fast, fast, will make you realize that development is a happy and valuable thing.

Thank you for reading this article carefully. I hope the article "HTML5 can preview how to upload multiple pictures using Ajax" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.