Introduction to the

This paper mainly introduces the problems and solutions of uploading files using Webuploader and compatible with IE8 and IE9. Webuploader is compatible with IE6 +.

The preparatory work

  1. To webuploader website to download fex.baidu.com/webuploader… Or download from Github.
  2. Create a project and copy the contents of webuploader.js, webuploader. CSS, and webuploader. SWF (preferably in the same hierarchy as the current component or *.html, for reasons explained later) into your project.
  3. Download a jQuery plugin (compatible with IE8 +, preferably version 2.0 or less, this demo uses version 1.9.1).
  4. Install http-server globally

How to use

My demo directory is as follows:

upload / / folder
  webuploader.js
  webuploader.css
  webuploader.swf
  jQuery1.91..js
  upload.html
Copy the code
  1. Add webuploader. CSS, jquery-1.9.1. js, webuploader.js to upload. HTML (jQuery will be introduced before webuploader.js)
  2. Configure webuploader.create ({}) according to the official webuploader document.
  3. Open the terminal in the project and type: HTTP-server.
  4. Open a browser and enter: http://localhost:8080/upload.html

Problems encountered and solutions

{display: None}, click block, click “Select file” button, but there is no response (all browsers do not respond)

Solution:

Right click on the “Select File” button to see width, height, and position for the input file. You might notice that none of them are displaying properly. Just change the style.

If webuploader. SWF does not have the same directory as upload

  • Webuploader.swf needs to be on the same level as uploader.html.

For example, my demo directory is as follows

upload / / folder
  css
    webuploader.css
  js
    webuploader.js
    webuploader.swf
    jQuery1.91..js
  upload.html
Copy the code

Iii. If there is no response from the same level, troubleshoot the problem and solve it:

  1. Check to see if there is a style problem in problem 1
  2. Check whether the Flash version is less than 11.4. If it is less than 11.4, upgrade Flash
  3. Right click the “Select file” button to see if it appears as shown below

How do WEbuploader submit parameters

The official documentation proposes passing parameters in initialization as follows:

WebUploader.create({
  / /... Other configurations...
  / /... Other configurations...
  formData: {
    file_uid: ' '.file_size: '0'}})Copy the code

File_uid = ”, file_size= ‘0’, cannot be passed as a different parameter for multiple file uploads. The official document does not provide details about the dynamic parameter transfer mode.

Parameter transfer mode:

uploader.on('uploadStart'.function (file) {
  // Each file starts uploading with different parameters
  uploader.options.formData.file_size = file.source.size;
  uploader.options.formData.file_uid = file.source.uid;
})
Copy the code

5. Cross-domain problems caused by FLASH upload in IE8 and IE9

This is not covered in detail in the official documentation. Find the crossDomain-xml file in the server directory from the webuploader github download. This is a cross-domain file. Send it to your backend and have it placed in the root directory of the server’s front-end code, at the same level as the HTML. When ie8 and IE9 upload files, falsh first sends a GET request whether to allow cross-domain, and then sends a request to upload files (the front-end code does not need to be changed).

As shown below:

http-server -p 8080 -P http://****/api/v1 -c-1
// -p: indicates the local access port number
// -p: indicates the domain name of the forwarding proxy
// -c-1: disable cache
Copy the code

Then you can upload successfully in IE8 and IE9.

Webuploader uploads large files

An ‘HTTP’ error will be reported when calculating the MD5 value when uploading files larger than 500Mb in browsers below Internet Explorer 9. No official solution was offered.

References:

webuploader: https://fex.baidu.com/webuploader/doc/index.html

webuploader github: https://github.com/fex-team/webuploader/issues

Original link:Tech.gtxlab.com/webuploader…

Author information: Ning Wenfei, Renhe Future Big data front-end engineer