使用AngularJS和WebService(.asmx)上传Image VarBinary(max)

时间:2017-04-21 03:00:24

标签: javascript c# angularjs web-services asmx

我仍然是AngularJS的新手,我想创建一个表单,允许我上传图像并将其保存到数据库并在html页面上查看。

.asmx文件

public void AddCard(int id, string cName, string cCoName, string cTpNmbr, string cEmail, string cAddress, string cStatus,string cScan)
    {
        string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
        using (SqlConnection con = new SqlConnection(cs))
        {
           byte[] cScan = File.ReadAllBytes(imageFilePath);
            SqlCommand cmd = new SqlCommand("Insert into tblCards(Id, Name, CoName, TpNmbr, Email, Address, Status, Scan) values('"+id+"','"+cName+"', '"+cCoName+"','" +cTpNmbr+"', '"+cEmail+"', '"+cAddress+"', '"+cStatus+"',@cScan)", con);
           SqlParameter param = cmd.Parameters.AddWithValue("@cScan", cScan);
            param.DbType = DbType.Binary;
            con.Open();
            cmd.ExecuteNonQuery();
        }
    }

.html文件

<form>
    <fieldset>
        <legend> ADD CARD / EDIT CARD </legend>
        <p> ID : <input type="text" ng-model="cards.id" /></p>
        <p>Name : <input type="text" ng-model="cards.cName" /></p>
        <p>Co. Name :<input type="text" ng-model="cards.cCoName" /></p>
        <p>Tp. Number : <input type="text" ng-model="cards.cTpNmbr" /></p>
        <p>Email : <input type="text" ng-model="cards.cEmail" /></p>
        <p>Address : <textarea ng-model="cards.cAddress"></textarea></p>
        <p>Status : <input type="text" ng-model="cards.cStatus" /></p>
        <p>Card Scan : <input type="file" ng-model="cards.cScan" /></p>
        <button type="button" class="btn btn-primary" ng-click="addCard(cards)"> Add Card </button>
        <button type="button" class="btn btn-primary" ng-click="editCards(cards)"> Edit Card </button>
        <button type="reset" class="btn btn-primary"> Reset Form </button>
    </fieldset>
</form>

AngularJS文件

$scope.addCard = function (card) {
    var id = card.id
    var cName = card.cName;
    var cCoName = card.cCoName;
    var cTpNmbr = card.cTpNmbr;
    var cEmail = card.cEmail;
    var cStatus = card.cStatus;
    var cAddress = card.cAddress;
    var cCount = card.cCount;
    var cScan = card.cScan;
    cCount = 0;
    $http({
        url: 'CardServices.asmx/AddCard',
        params: {
            id: id,
            cName: cName,
            cCoName: cCoName,
            cTpNmbr: cTpNmbr,
            cEmail: cEmail,
            cStatus: cStatus,
            cAddress: cAddress,
            cScan:cScan
        },
        method: 'GET'
    }).then(function (response) {
        GetAllCards();
        alert("Card Added to Database!");

    });
    }

我在线查询并尝试使用该代码,但似乎是这样  不工作。

提前致谢

0 个答案:

没有答案