Dropzone,Angular,MVC5实现

时间:2016-05-31 14:39:37

标签: javascript angularjs asp.net-mvc dropzone.js

链接到dropzone:https://github.com/enyo/dropzone

我正在尝试使用dropzone作为我的文件上传处理程序,使用angularjs和MVC5。

问题是我似乎无法通过angularjs服务获取Http帖子到MVC 5后端。

我想发布文件以及其他值(如action)和名为“values”的字符串值

以下是代码(在服务中,angularjs)

  sendProductFiles: function (act, file, val) {
        return $http.post('/attributes/uploads', $.param({
            action: act,
            files: file,
            values: val
        }), 
        {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
    }

控制(角度)

$scope.intakeUpload = function (files) {
    var fd = new FormData();
    for (var i = 0; i < files.length; i++)
        fd.append('file', files[i]);


    AttributionViewService.sendProductFiles("addAttr", fd, $scope.selectedValues).then(function (res) {

    }, function (err) {

    });
}
  Dropzone.options.myAwesomeDropzone = {

    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    // Dropzone settings
    init: function () {
        var myDropzone = this;

        this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });
        this.on("sendingmultiple", function (files) {
            $scope.intakeUpload(files);
        });
        this.on("addedfile", function (file) {
            file.previewElement.addEventListener("click", function () { this.removeFile(file); });
        });
    }

}

在MVC 5控件中

 [HttpPost]
    [Route("attributes/uploads")]
    public ActionResult AcceptUploads(string action, HttpPostedFile[] files, string values)
    {
        if (files.Length <= 0)
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        foreach (var file in files)
        {
            System.Diagnostics.Debug.WriteLine(file.FileName);
        }
        System.Diagnostics.Debug.WriteLine(values); 
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

在当前状态下,我收到jquery错误 jquery.js:8458未捕获的TypeError:非法调用

编辑,也尝试了以下内容:

角色服务

 sendProductFiles: function (act, file, val) {
        return $http.post('/attributes/uploads', $.param({
            action: act,
            files: file,
            values: val
        }), {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

1 个答案:

答案 0 :(得分:0)

修正了它!

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.flowershop.myapplication.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include
        android:id="@+id/id_content_main"
        layout="@layout/content_main" />

</android.support.design.widget.CoordinatorLayout>