HTML：
<script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/DropZone-2.0.1.js"></script> <script src="~/Scripts/angular.js"></script> <script src="~/App_Angular/app.js"></script> <div ng-app ="myApp" ng-controller ="ProductsCtrl"> <input ng-model="product.Name"/> <input ng-model="product.PhotoName" id="result" /> <form id="dropzone" class="fade well">Drop files here</form> <input type="button" value="Upload Files" ng-click="save(product)" />
使用Javascript：
$("#dropzone").dropzone({
url: 'Home/UploadFiles',paramName: "files",// The name that will be used to transfer the file
maxFilesize: 102,// MB
enqueueForUpload: false,accept: function (file,done) {
angular.element(document.getElementById('result')).scope()
.$apply(function (scope) {
scope.product.PhotoName = $('#result').val();
});
return done();
}
});
function uploadClicked() {
var dz = Dropzone.forElement("#dropzone");
for (var i = 0; i < dz.files.length; i++) {
dz.filesQueue.push(dz.files[i]);
}
dz.processQueue(dz);
$('#innerQue').empty();
}
在ng-click中调用save方法时,我已成功将照片名称传递给$scope.product.PhotoName.
我无法上传图片.我不知道如何从角度调用’uploadClicked’.
任何援助将不胜感激.
解决方法
解决了(在Mark Rajcok的帮助下).
完整解决方案
HTML：
<script src="~/Scripts/jquery-1.9.1.js"></script> <script src="~/Scripts/DropZone-2.0.1.js"></script> <script src="~/Scripts/angular.js"></script> <script src="~/App_Angular/app.js"></script> <div ng-app ="myApp" ng-controller ="ProductsCtrl"> <input ng-model="product.Name"/> <input ng-model="product.PhotoName" id="result" /> <form id="dropzone" class="fade well">Drop files here</form> <input type="button" value="Upload Files" ng-click="save(product)" /> </div>
使用Javascript：
$("#dropzone").dropzone({
url: 'Home/UploadFiles',done) {
angular.element(document.getElementById('result')).scope()
.$apply(function (scope) {
scope.product.PhotoName = $('#result').val();
});
return done();
}
});
function uploadClicked() {
var dz = Dropzone.forElement("#dropzone");
for (var i = 0; i < dz.files.length; i++) {
dz.filesQueue.push(dz.files[i]);
}
dz.processQueue(dz);
$('#innerQue').empty();
}
在这里修改dropzone.js：
addedfile: function (file) {
file.previewTemplate = createElement(this.options.previewTemplate);
this.previewsContainer.appendChild(file.previewTemplate);
rem out --> //file.previewTemplate.querySelector(".filename span").textContent = file.name;
add this --> return ($('input[id=result]').val(file.name));
AngularController：
function ProductsCtrl($scope,$routeParams,$http,$location) {
$scope.products = [];
$scope.product = {};
$scope.save = function (data) {
$scope.product = angular.copy(data);
$http.post('/api/Products',$scope.product)
.success(function () {
window.uploadClicked(); <---------------------- Solution
})
.error(function (data) {
// alert(data);
});
};
向MVC开发者增加奖励：
public ActionResult UploadFiles(IEnumerable<HttpPostedFileBase> files)
{
//Works in Everything and IE10+**
if (!string.IsNullOrEmpty(Request.Headers["X-File-Name"]))
{
string path = Server.MapPath(string.Format("~/Uploads/{0}",Request.Headers["X-File-Name"]));
Stream inputStream = Request.InputStream;
FileStream fileStream = new FileStream(path,FileMode.OpenOrCreate);
inputStream.CopyTo(fileStream);
fileStream.Close();
}
}
