AngularJs, DropZone.Js, mvc4拖动预加载图像的预览/

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 id="result" ng-model="product.PhotoName"/>

<form class="fade well" id="dropzone">Drop files here</form>

<input ng-click="save/product/" type="button" value="Upload Files"/>

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//;

}

我设法成功地传达了照片的名称 $scope.product.PhotoName, 当方法时 save 叫B. ng-click.

一世

不是

我可以上传图像。 我不知道怎么打电话 'uploadClicked' 的 angular.

任何帮助将不胜感激。
</div>
<div class="answer_text">
solven. /raykok的一些帮助品牌/.

完整的解决方案

:

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 id="result" ng-model="product.PhotoName"/>

<form class="fade well" id="dropzone">Drop files here</form>

<input ng-click="save/product/" type="button" value="Upload Files"/>

</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//;

 }

 }

</httppostedfilebase></div>