我试图通过文件上传解决 IE9 中的问题。我使用 JQuery 的文件上传插件,当我默认使用输入文件时,我没有问题,但是如果我使用隐藏的输入文件并通过单击假按钮触发事件,那将不起作用。
我正在使用两个指令来实现这一点:
ecm_directives.directive('fileupload', function(){
return {
restrict: 'A',
scope: {
done: '&',
progress: '&'
},
link: function(scope, element, attrs) {
var optionsObj = {
dataType: 'json'
};
if (scope.done) {
optionsObj.done = function(e, data) {
scope.$apply(function() {
scope.done({e: e, data: data});
});
};
}
if (scope.progress) {
optionsObj.progress = function(e, data) {
scope.$apply(function() {
scope.progress({e: e, data: data});
});
};
}
//the above could easily be done in a loop, to cover
//all API's that Fileupload provides
element.fileupload(optionsObj);
}
}
});
ecm_directives.directive('uploader', function () {
return {
restrict: 'E',
link: function(scope, element, attrs,ctrl) {
element.find("button").bind("click", function(){
element.find(":file").trigger("click").bind("change",function(){
console.log("change");
scope.kaka = element.find("input").val();
scope.$apply();
console.log("changed", scope.kaka);
})
});
}
}
});
这是html
<div class="fake-file" ng-show="!candidateFiles.cedula.selected">
<uploader>
<button type="button" class="fake-input">
<span class="placeholder ng-binding"> Seleccione un archivo de su ordenador</span>
</button>
<button type="button" class="btn fake-btn fake-upload-btn ng-binding">Subir</button>
<input ng-model="ccedulaCandidato" id="cedula-file" type="file" name="ccedulaCandidato" data-url="/backend/documents/save/" class="file_upload_btn ng-isolate-scope ng-scope ng-pristine ng-valid" style="display:none" fileupload="" done="uploadFinished(e, data)">
</uploader>
</div>
关键是那一行: element.find(":file").bind("change",function(){ }
永远不要在 IE9 中输入这里,知道吗?