上传附件 ，使用到jquery.form.js插件

 

<!--html-->

<!--附件-->

<form class="form" enctype='multipart/form-data'>  //注意上传文件要写enctype='multipart/form-data'   

<div class="attachments">
　　<div>
　　　　<p ng-repeat="(key,value) in attachments" class="{{key}}">
　　　　　　<label><span>{{value.name}}</span><b ng-click= "addAttachment(key)">+</b></label>
　　　　　　<span class="selectBut1" ng-repeat="item1 in value.vals track by $index">
　　　　　　　　<!--选择-->
　　　　　　　　<span ng-if= "!item1 && imgShow ==1" ng-mouseover="mouseover(key,$index)" ng-mouseleave="mouseleave(key,$index)" style="z-index: 1;">
　　　　　　　　　　<label for= "{{key+$index}}">选择图片</label><input id= "{{key+$index}}" type="file" name="{{key}}" class="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"/>
　　　　　　　　　　<span class="closebtn" ng-click="delImg1(key,$index)">-</span>
　　　　　　　　</span>
　　　　　　　　<!--显示-->
　　　　　　　　<span class="showImg" ng-if="item1" style="background-image:url({{path+item1.filePath}});">
　　　　　　　　　　<span class="closebtn" ng-click="delImg2(key,$index)">-</span>
　　　　　　　　</span>
　　　　　　</span>
　　　　</p>
　　</div>
</div>

</form>

<!--js-->

//附件
$scope.attachments = [{
　　name: '身份证',
　　code: 'idCard',
　　vals: ['']
　　}, {
　　name: '出借协议',
　　code: 'loanAgreement',
　　vals: ['']
　　}, {
　　name: '银行卡',
　　code: 'bankCard',
　　vals: ['']
　　}, {
　　name: '支付凭证',
　　code: 'proofOfPayment',
　　vals: ['']
　　}, {
　　name: '其他',
　　code: 'others',
　　vals: ['']
}]

 

 

//附件(已存在的附件)
if(preObj) {
　　if(preObj.providerFileList) {
　　　　for(var i = 0; i < preObj.providerFileList.length; i++) {
　　　　　　var tmp = preObj.providerFileList[i]
　　　　　　if($scope.attachments[tmp.name]) {
　　　　　　　　$scope.attachments[tmp.name].vals.unshift(tmp)
　　　　　　}
　　　　}
　　}
}

 

//添加附件
$scope.addAttachment = function(key) {
　　$scope.attachments[key].vals.push('')
}

$('.attachments').on('change', 'input[type=file]', function(e) { 
　　$scope.files = event.target.files
})

 

//显示附件
$scope.mouseover = function(key,index){
　　if($('input[id="' + key + index + '"]')[0].files[0]){
　　　　var imgSrc = window.URL.createObjectURL($('input[id="' + key + index + '"]')[0].files[0])
　　　　$('.imgBig').attr('src',imgSrc)
　　　　$('.imgBig').show()
　　}
}

//隐藏附件
$scope.mouseleave = function(){
　　$('.imgBig').hide()
}

 

 

//删除上传附件
$scope.delImg1 = function(key, index) {
　　$('.' + key + '').children('.selectBut1').eq(index).hide()
　　$('input[id="' + key + index + '"]').val('')
}

 

//删除已有附件
$scope.imgIds = []
$scope.delImg2 = function(key, index) {
　　$scope.imgIds.push($scope.attachments[key].vals[index].id)
　　angular.forEach(preObj.providerFileList, function(v, i) {
　　　　if(v.id == $scope.attachments[key].vals[index].id) {
　　　　　　preObj.providerFileList.splice(i, 1)
　　　　}
　　})
　　$scope.attachments[key].vals.splice(index, 1)
}

 

 

var options = {
　　url: "",
　　type: 'post',
　　data: data,  //data是单独提交的数据（表格中没有的），可写可不写
　　success: function(data) {
　　if(JSON.parse(data).code == 200) {} 
　　}
}
$('.form').ajaxSubmit(options) //jquery.form.js插件可以上传表单中所有有name属性的数据，并且提交表单后页面不跳转

 

参考文章http://blog.csdn.net/mazhibinit/article/details/49667511