plupload多个实例很简单,但是麻烦的是,返回的时候没有明显标记区分input的id,好蛋疼
var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 // browse_button: 'browse', browse_button: ['browse', 'browse_logo'], url: '/admin/System/uploadImg', flash_swf_url: 'js/Moxie.swf', silverlight_xap_url: 'js/Moxie.xap', filters: { max_file_size: '10mb', //最大上传文件大小(格式100b, 10kb, 10mb, 1gb) mime_types: [ //允许文件上传类型 { title: "files", extensions: "jpg,png,gif,jpeg" } ] }, multi_selection: false,//单选,true多选 init: { FilesAdded: function(up, files) { //文件上传前,就是打开文件对话框,选好文件之后触发 uploader.start(); }, FileUploaded: function(up, file, info) { //文件上传成功的时候触发 if ($scope.current_input_id == 'browse') { var data = eval("(" + info.response + ")"); $scope.$apply(function() { var tempImg = {}; tempImg.id = file.id; tempImg.src = data.data[0]; tempImg.is_default = $scope.productImageList.length ? false : true; $scope.main_image = $scope.productImageList.length ? $scope.main_image : data.data[0]; $scope.productImageList.push(tempImg); //注释掉的代码是为了预防多图 }); } if ($scope.current_input_id == 'browse_logo') { var data = eval("(" + info.response + ")"); $scope.$apply(function() { var tempLogo = {}; tempLogo.id = file.id; tempLogo.src = data.data[0]; tempLogo.is_default = $scope.logoImageList.length ? false : true; $scope.main_logo_image = $scope.logoImageList.length ? $scope.main_logo_image : data.data[0]; $scope.logoImageList.push(tempLogo); //注释掉的代码是为了预防多图 }); } }, Error: function(up, err) { //上传出错的时候触发 alert(err.message); } } });
browse_button: ['browse', 'browse_logo']就是多实例,我这里使用的是angularjs
<input type="file" id="browse_logo" name="file" class="upload upload-file" ng-click="uploadBtn('browse_logo')" style="margin-top:78px;">
你可以在整个组件加上一个onclick事件,传递一个参数过去就可以知道是哪个实例做了上传动作
$scope.uploadBtn = function(id) { $scope.current_input_id = id; };
建议使用别的插件,百度的webuploader比较好使,而且网上关于Plupload的中文开发文档都比较旧了,有时间翻译一版
http://fex.baidu.com/webuploader/