7

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

save メソッドが ng-click で呼び出されたときに、写真の名前を $scope.product.PhotoName に正常に渡すことができました。

画像をアップロードできませんでした。angularから「uploadClicked」を呼び出す方法がわかりません。

任意の支援をいただければ幸いです。

4

1 に答える 1

10

解決済み (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();
        }
   }

ここに画像の説明を入力

于 2013-03-27T21:38:36.130 に答える