Detailed explanation of how to use jQuery upload plug-in webupload

WebUploader is a simple modern file upload component developed by Baidu WebFE (FEX) team based on HTML5 and supplemented by FLASH. It can give full play to the advantages of HTML5 in modern browsers without abandoning the mainstream IE browser. It uses the original FLASH runtime and is compatible with IE6+, iOS 6+, android 4+. The two sets of runtimes have the same calling method and can be selected by the user. The use of large file fragmentation and concurrent upload greatly improves file upload efficiency. This article mainly introduces in detail how to use the Jquery upload plug-in webupload. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

This plug-in is easy to use and has more powerful functions. It is more powerful than ajaxfileupload. You can download it from the official website.

Currently, only the image batch upload function is used in the project. The official examples have been written in great detail. Here is how to migrate the official examples to your own project:

// 实例化
 uploader = WebUploader.create({
  pick: {
  id: '#filePicker',
  label: '点击选择图片'
  },
  formData: {
  uid: 123
  },
  dnd: '#dndArea',
  paste: '#uploader',
  swf: '../../dist/Uploader.swf',
  chunked: false,
  chunkSize: 512 * 1024,
  server: '../../server/fileupload.php',
  // runtimeOrder: 'flash',

  // accept: {
  // title: 'Images',
  // extensions: 'gif,jpg,jpeg,bmp,png',
  // mimeTypes: 'image/*'
  // },

  // 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
  disableGlobalDnd: true,
  fileNumLimit: 300,
  fileSizeLimit: 200 * 1024 * 1024, // 200 M
  fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
 });

1. The server is modified to use its own background processing class to obtain the images uploaded by the plug-in through HttpFileCollection files = System.Web.HttpContext.Current.Request.Files; request.Files.

2. The sample program enables compression by default. This can be set. When the image is larger than a certain size, the image can be automatically compressed. If compression is not required, you need to add compress:false, attribute ## during initialization.

#3,

accept: {
  title: 'Images',
  extensions: 'gif,jpg,jpeg,bmp,png',
  mimeTypes: 'image/*'
  },

The official example of uploading pictures has commented out the picture filtering for some reason. If you want to upload only pictures, then Need to remove the comment

4. Added the judgment of the pixel size of the picture. I used the uploadAccept method. I submitted the picture and then judged it in the background. (I don’t know if there is a better way.) Because the plug-in The file class itself can process files, so it does not obtain the pixel attributes separately. Example:

 uploader.on('uploadAccept', function (object, ret) {
 
  var resJson = $.parseJSON(ret._raw);
  if (resJson.result == "error") {
   alert(object.file.name + "象素太低，请检查上传！");
   return false;
  }
 
  });

When this method returns false, it will cause the image upload to fail. Therefore, after the background determines the pixels, the status of the image upload is changed through the status returned by the background.

Related recommendations:

Usage examples of webupload upload plug-in in jQuery

Judge whether webuploader uploads example code

webuploader’s 10 content recommendations

The above is the detailed content of Detailed explanation of how to use jQuery upload plug-in webupload. For more information, please follow other related articles on the PHP Chinese website!