AngularJs,DropZone.Js,MVC4 - 拖放,预览和预览上传的图像

Question

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.

我HAVE NOT能上传图片.我不知道如何从角度调用'uploadClicked'.

任何援助将不胜感激.

Answer 1

解决了(在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',
    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();
}

在这里修改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();
        }
   }