jQuery文件上传插件angularfileupload

所属分类:输入-上传

 23056  58  查看评论 (8)
jQuery文件上传插件angularfileupload ie兼容8

特性

  • 支持上传进度,在上传的时候,可以取消或者中止,支持文件拖拽(HTML5),目录拖拽(weikit),CORS, PUT(html5)/POST 方法

  • 支持使用 Flash polyfill FileAPI  跨浏览器上传 (HTML5 和 non-HTML5) 。允许客户端在上传之前验证或者修改文件。

  • 当文件的内容类型使用 $upload.http()时,支持直接上传到 CouchDB,imgur 等等。支持 Angular http POST/PUT 请求的进度事件,更多内容请看 #88(comment) 

  • Separate shim file loaded on demand for non-HTML5 code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed for progress event in HTML5 browsers)

  • 轻量级,使用常规的 $http 来上传(支持非 HTML5 浏览器),所以提供所有 Angular $http 功能

使用

HTML:

<!-- shim is needed to support upload progress/abort for HTML5 and non-HTML5 FormData browsers.--><!-- angular-file-upload-html5-shim.js could be used instead of angular-file-upload-shim if your app targets HTML5 browsers only (not IE8-9) --><!-- Note: shim.js MUST BE PLACED BEFORE angular.js and angular-file-upload.js AFTER angular.js--><script src="angular-file-upload-shim.min.js"></script> 
<script src="angular.min.js"></script>
<script src="angular-file-upload.min.js"></script> 
 
<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ng-file-select="onFileSelect($files)">
  <input type="file" ng-file-select="onFileSelect($files)" multiple accept="image/*">
  <div class="button" ng-file-select="onFileSelect($files)" data-multiple="true"></div>
  <div ng-file-drop="onFileSelect($files)" ng-file-drag-over-class="optional-css-class-name-or-function"
        ng-show="dropSupported">drop files here</div>
  <div ng-file-drop-available="dropSupported=true" 
        ng-show="!dropSupported">HTML5 Drop File is not supported!</div>
  <button ng-click="upload.abort()">Cancel Upload</button>
</div>

JS:

//inject angular file upload directives and service.angular.module('myApp', ['angularFileUpload']);var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        //method: 'POST' or 'PUT',
        //headers: {'header-key': 'header-value'},
        //withCredentials: true,
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files ($files) for html5 only
        //fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
        // customize file formData name ('Content-Disposition'), server side file variable name. 
        //fileFormDataName: myFile, //or a list of names for multiple files (html5). Default is 'file' 
        // customize how data is added to formData. See #40#issuecomment-28612000 for sample code
        //formDataAppender: function(formData, key, val){}
      }).progress(function(evt) {        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {        // file is uploaded successfully
        console.log(data);
      });      //.error(...)
      //.then(success, error, progress); 
      // access or attach event listeners to the underlying XMLHttpRequest.
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})
    }    /* alternative way of uploading, send the file binary with the file's content-type.       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.        It could also be used to monitor the progress of a normal http post/put request with large data*/
    // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
  };
}];


相关插件-上传

图片上传插件zyupload java版实例代码

本插件经本人多次修改完善,功能齐全,支持多图片上传、拖拽上传、剪辑、编辑,上传预览,编辑获取默认值等功能,并且每一个功能对应一个demo,简单易懂,方便学习修改
  上传
 40214  271

jquery图片上传

图片上传
  上传
 57212  246

jQuery h5拖拽多文件上传

可用input控件选择文件,也可以拖拽文件,可以一次上传多个文件,测试需要后台配合,支持失败重传,支持过滤文件类型,文件大小,及同一文件重复上传。
  上传
 8946  62

基于HTML5的jquery文件上传插件

这个插件是照着uploadify的api文档写的
  上传
 65597  151

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    Jayven0
    2017/1/10 11:01:15

    为啥谷歌52 及以上版本上传的时候 报403 跨域的问题呢~

    回复
    Freed0
    2016/8/3 13:08:29
    PHP写的太简单了,而且文件上传之后名字也不给改,万一名字重复了呢 回复
    瞌睡虫0
    2016/7/15 17:07:05
    [HttpException]: 不允许用于访问路径“/angular-file-upload/angular-file-upload-master/examples/simple/upload.php”的 HTTP 谓词 POST。upload.php有问题啊,上传不了文件 回复
    瞌睡虫0
    2016/7/15 17:07:51
    是上传的uploads里面吗?为什么我刚下的代码,没上传上去? 回复
    瞌睡虫0
    2016/7/15 17:07:57
    问一下你controllers.js这里写的upload.php,这个干啥用的?文件上传位置在哪该? 回复
    张旭超0
    2016/7/14 10:07:50
    下载的代码和,首页贴的不是一个啊,想问问首页贴的代码段,有完整的吗?急用啊, 回复
    what??0
    2016/6/27 11:06:18
    風啟❦落時0
    2016/5/30 8:05:11
    请问后台是用的什么代码呢? 回复
取消回复
    PROMULGATOR

    tzf2008liu

    火星