asp.net-mvc-4 – AngularJs,DropZone.Js,MVC4 – 拖放,预览和预
发布时间:2020-12-15 20:54:54 所属栏目:asp.Net 来源:网络整理
导读:HTML: script src="~/Scripts/jquery-1.9.1.js"/scriptscript src="~/Scripts/DropZone-2.0.1.js"/scriptscript src="~/Scripts/angular.js"/scriptscript src="~/App_Angular/app.js"/scriptdiv ng-app ="myApp" ng-controller ="ProductsCtrl"input ng-mo
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(); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- asp.net – IE 8和客户端缓存
- ASP.Net是适用于高负载网站的技术吗?
- 是否有来自asp.net的htmlencode / htmldecode的javascript等
- ASP.NET C#捕获类中的所有异常
- asp.net – 在自定义声明中保留用户安全配置文件数据
- asp.net 自动将汉字转换成拼音第一个字母
- asp.net-web-api – 在身份验证过滤器中的ChallengeAsync方
- asp.net-mvc – ASP.Net MVC TempData – 如何保持状态
- asp.net-mvc – MicrosoftMvcValidation.js VS jquery.vali
- asp.net-mvc – 我应该在数据库中的URL中存储空格吗?如果是
推荐文章
站长推荐
- asp.net-mvc – WebApi(ApiController)与ASP.Net
- asp.net-mvc-3 – MVC3,多文件上传,模型绑定
- ASP.NET Web API操作使用接口而不是具体类
- 在ASP.Net中如何做一个搜索表单?
- 从asp.net页面查看器Web部件显示当前经过身份验证
- asp.net-mvc – ASP.net mvc页脚的公共数据
- asp.net – 我应该在哪里放置scriptmanager
- asp.net – NewRelic – 如何忽略Web应用程序的一
- 您可以为标准ASP.NET Web窗体验证器定制客户端Ja
- asp.net – RegisterStartupScript和执行顺序
热点阅读