jQuery의 webupload 업로드 플러그인 사용 예

이 글에서는 주로 Jquery 업로드 플러그인 webupload의 사용법을 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

WebUploader는 Baidu WebFE(FEX) 팀에서 개발한 간단한 웹업로더입니다. HTML5를 기반으로 하며 FLASH로 보완됩니다. 주류 IE 브라우저를 버리지 않고도 최신 브라우저에서 HTML5의 장점을 최대한 활용할 수 있으며 원래 FLASH 런타임을 사용하고 IE6+, iOS 6+, Android 4+와 호환됩니다. 두 런타임 세트는 동일한 호출 방법을 가지며 사용자가 선택할 수 있습니다. 대용량 파일 조각화 및 동시 업로드를 사용하면 파일 업로드 효율성이 크게 향상됩니다.

이 플러그인은 사용하기 쉽고 더 강력한 기능을 가지고 있습니다. 공식 웹사이트에서 다운로드할 수 있습니다.

현재 프로젝트에서는 이미지 일괄 업로드 기능만 사용됩니다. 공식 예제가 매우 자세하게 작성되었습니다. 공식 예제를 자신의 프로젝트로 마이그레이션하는 방법은 다음과 같습니다.

// 实例化
 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. 처리 클래스는 HttpFileCollection files = System.Web.HttpContext.Current.Request.Files;를 통해 플러그인에서 업로드한 이미지를 가져옵니다.

2. 샘플 프로그램은 기본적으로 압축을 활성화합니다. 이미지가 특정 크기보다 큰 경우 압축이 필요하지 않은 경우 압축:false 속성을 추가해야 합니다.

3,

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

공식 사진 업로드 예시에서 사진 필터링이 왜 주석 처리되어 있는지 모르겠습니다. 업로드하려는 파일이 사진만 선택할 수 있으면 제거해야 합니다. 댓글

4. 사진의 픽셀 크기에 대한 판단을 추가했습니다. uploadAccept 메소드를 사용하면 이미지가 제출된 후 백그라운드에서 판단됩니다. (더 좋은 방법이 있는지 궁금합니다.) 왜냐하면 파일 클래스 때문입니다. 플러그인 자체가 파일을 처리할 수 있으므로 픽셀 속성을 별도로 가져오지 않습니다. 예:

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

이 메서드가 false를 반환하면 이미지 업로드가 실패하므로 배경이 픽셀을 결정하고 변경합니다 백그라운드에서 반환된 상태를 통해 이미지 업로드 상태를 확인합니다.

위 내용은 jQuery의 webupload 업로드 플러그인 사용 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!