Asp.net mvc 4 AngularJs、DropZone.Js、MVC4-拖放和预览预上载的图像
Html:Asp.net mvc 4 AngularJs、DropZone.Js、MVC4-拖放和预览预上载的图像,asp.net-mvc-4,angularjs,Asp.net Mvc 4,Angularjs,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> <
<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)" />
<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>
$("#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();
}
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));
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);
});
};
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();
}
}
把文件放在这里
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”).dropzone({
url:“主/上载文件”,
paramName:“files”,//将用于传输文件的名称
最大文件大小:102,//MB
enqueueForUpload:false,
接受:函数(文件,完成){
元素(document.getElementById('result')).scope()
.$apply(功能(范围){
scope.product.PhotoName=$('#result').val();
});
返回完成();
}
});
函数uploadClicked(){
var dz=Dropzone.forElement(“Dropzone”);
对于(var i=0;i
在ng click中调用save方法时,我已成功地将照片名称传递给$scope.product.PhotoName
我无法上传图像。我不知道如何从angular调用“uploadClicked”
任何帮助都将不胜感激。已解决(在Mark Rajcok的帮助下)。
完整解决方案:
<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)" />
<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>
$("#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();
}
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));
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);
});
};
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();
}
}
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)" />
<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>
$("#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();
}
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));
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);
});
};
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();
}
}
角度控制器:
<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)" />
<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>
$("#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();
}
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));
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);
});
};
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();
}
}
函数ProductsCtrl($scope、$routeParams、$http、$location){
$scope.products=[];
$scope.product={};
$scope.save=函数(数据){
$scope.product=angular.copy(数据);
$http.post('/api/Products',$scope.product)
.success(函数(){
window.uploadClicked();在JavaScript中不是全局的,所以你的控制器不能直接调用它吗?:$scope.save=function(product){…;uploadClicked();}
马克:说真的,你有那么聪明吗?我就是那么愚蠢吗?:)