Usage example of webupload upload plug-in in jQuery-JS Tutorial-php.cn

Usage example of webupload upload plug-in in jQuery

巴扎黑

Release： 2017-08-13 14:52:26

Original

1805 people have browsed it

This article mainly introduces the use of Jquery upload plug-in webupload in detail, which has certain reference value. Interested friends can refer to it

WebUploader is developed by Baidu WebFE (FEX) team A simple modern file upload component developed 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 concurrent uploading of large files in fragments greatly improves the efficiency of file uploading.

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: &#39;#filePicker&#39;,
  label: &#39;点击选择图片&#39;
  },
  formData: {
  uid: 123
  },
  dnd: &#39;#dndArea&#39;,
  paste: &#39;#uploader&#39;,
  swf: &#39;../../dist/Uploader.swf&#39;,
  chunked: false,
  chunkSize: 512 * 1024,
  server: &#39;../../server/fileupload.php&#39;,
  // runtimeOrder: &#39;flash&#39;,

  // accept: {
  // title: &#39;Images&#39;,
  // extensions: &#39;gif,jpg,jpeg,bmp,png&#39;,
  // mimeTypes: &#39;image/*&#39;
  // },

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

Copy after login

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: &#39;Images&#39;,
  extensions: &#39;gif,jpg,jpeg,bmp,png&#39;,
  mimeTypes: &#39;image/*&#39;
  },

Copy after login

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(&#39;uploadAccept&#39;, function (object, ret) {
 
  var resJson = $.parseJSON(ret._raw);
  if (resJson.result == "error") {
   alert(object.file.name + "象素太低，请检查上传！");
   return false;
  }
 
  });

Copy after login

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.

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