jquery图片上传

文章目录

1. 1. jquery-fileupload
   1. 1.1. 异步上传
   2. 1.2. 预览
   3. 1.3. 客户端裁剪

图片上传在web中也是经常用到，这里整理下

jquery-fileupload

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

异步上传

• 最小支持文件

  jquery.fileupload.css
  jquery.min.js
  jquery.ui.widget.js
  jquery.iframe-transport.js
  jquery.fileupload.js

  ---

  <div class="form-group">
      <label class="col-sm-2 control-label">图片</label>
      <div class="col-sm-4 form-control-static">
          <a target="_blank" href="" id="pic" style="display: none">
              <img width="128px" height="63px" src=""/>
          </a>
          <span class="btn btn-success fileinput-button btn-sm">
               <i class="glyphicon glyphicon-plus"></i>
          <span>上传</span>
              <input class="uploadPicBtn" type="file" name="file">
          </span>
          <input type="hidden" name="pic" >
      </div>
  </div>
  
  //自定义processbar
  var processHtml = '<div id="progress" class="progress"><div class="progress-bar progress-bar-success"></div></div>';
  $('.uploadPicBtn').fileupload({
      url: '/upload/push',
      dataType: 'json',
      start: function (e) {
          $(e.target).parent().after(processHtml);
      },
      done: function (e, data) {
          if (data.result.result == false) {
              alert(data.result.msg);
              return;
          }
          var img_url = data.result.data[0].src;
          $('input[name=pic]').val(img_url);
          $('#pic').attr('href', img_url).show().find('img').attr('src', img_url);
          $('#progress').remove();
      },
      progressall: function (e, data) {
          var progress = parseInt(data.loaded / data.total * 100, 10);
          $('#progress .progress-bar').css(
              'width',
              progress + '%'
          );
      }
  });

  预览

• 使用imgeload load-image.all.min.js

  $('.fileupload').fileupload({
          disableImageResize: false,
          previewMaxWidth: 320,
          previewMaxHeight: 320
      }).bind('fileuploadprocessalways', function(e, data)
      {
          var canvas = data.files[0].preview;
          var dataURL = canvas.toDataURL();
          $("#test").attr("src", '' + dataURL +'').show();
      });

• 使用filereader

  function readURL(input) {
          if (input.files && input.files[0]) {
              var reader = new FileReader();            
              reader.onload = function (e) {
                  $('#target').attr('src', e.target.result);
              }      
              reader.readAsDataURL(input.files[0]);
          }
  }
  # 或
  $('.uploadPicBtn').fileupload({
      disableImageResize: false,
      previewMaxWidth: 320,
      previewMaxHeight: 320
  }).bind('fileuploadprocessalways', function(e, data)
  {
      var canvas = data.files[0].preview;
      var dataURL = canvas.toDataURL();
      $("#img-element").attr("src", '' + dataURL +'').show();
  });

demo： jquery-upload-preview 查看源码了解

---

客户端裁剪

• Client-side-Image-Resizing

  $('.uploadPicBtn').fileupload({
      url: '/upload/push',
      dataType: 'json',
      // Enable image resizing, except for Android and Opera,
      // which actually support image resizing, but fail to
      // send Blob objects via XHR requests:
      disableImageResize: /Android(?!.*Chrome)|Opera/.test(window.navigator && navigator.userAgent),
      imageMaxWidth: 800,
      imageMaxHeight: 800,
      imageCrop: true // Force cropped images
  });

---

附jquery-fileupload文档

如有疑问，请文末留言交流或邮件：newbvirgil@gmail.com 本文链接 : https://newbmiao.github.io/2015/09/23/some-code-when-use-jquery-fileupload.html