AngularJs，DropZone.Js，MVC4 - 中，拖放和preVIEW pre-上传的图片（S）

问题描述

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：

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();
}

我已经能够对照片名称successly传递给$ scope.product.PhotoName当保存方法被称为NG-点击。

I have been able to successly pass the photo name to $scope.product.PhotoName when the save method is called in ng-click.

我HAVE NOT 能上传图片。我不知道该怎么称呼从角uploadClicked。

I HAVE NOT been able to upload the image. I do not know how to call 'uploadClicked' from angular.

任何援助将AP preciated。

Any assistance would be appreciated.

推荐答案

解决（与马克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();
        }
   }

这篇关于AngularJs，DropZone.Js，MVC4 - 中，拖放和preVIEW pre-上传的图片（S）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！