通过对PNG格式提交，申请网址太长 [英] Pass PNG on form submit, Request URL Too long

问题描述

所以，我有一个有趣的问题。我有其中一个用户在画布上绘制图像的形式（想了签名板）。然后，我需要将图像发送到我的C＃控制器（我使用ASP.NET MVC 5）。在code我有功能更短的字符串，但是当我尝试通过PNG数据，实在是太长了，我免费获赠 HTTP 414错误的请求URL太长错误。这里是我的code：

So I have an interesting question. I have a form where a user draws an image on a canvas (think a signature pad). I then need to send the image to my C# Controller (I am using ASP.NET MVC 5). The code I have functions for shorter strings, but when I try to pass the PNG data, it is too long and I recieve a HTTP Error 414. The request URL is too long error. Here is my code:

HTML：

<form id="mainForm" action="submitUserAnswer" method="post">
    <input type="hidden" id="userOutput" name="output" value="" />
    //...other form elements, signature box, etc.
</form>

使用Javascript：

Javascript:

function goToNextQuestion() {
    var output = $('#signature').jSignature("getData");
        $('#userOutput').val(output);
        $('#mainForm').submit();
}

C＃：

public ActionResult submitUserAnswer()
    {
        //use the userOutput for whatever
        //submit string to the database, do trigger stuff, whatever
        //go to next question
        System.Collections.Specialized.NameValueCollection nvc = Request.Form;
        string userOutput = nvc["output"];
        ViewBag.Question = userOutput;
        return RedirectToAction("redirectToIndex", new { input = userOutput });
    }

    public ActionResult redirectToIndex(String input)
    {

        ViewBag.Answer = input;
        return View("Index");
    }

我的PNG数据是很长，所以错误是有道理的。我的问题是我怎么能得到PNG数据回我的控制器？

My png data is very long, so the error makes sense. My question is how can I get the png data back to my controller?

推荐答案

您，因为您的数据串的（Base64）有错误并有发送字符的最大限制，更好的方法是在客户端创建的base64 BLOB（png文件）侧，并且将其发送给服务器。 修改所有上市$ C $这里C，存在于计算器的帖子。

You have error because your data is string (base64) and have max limit for send characters, better way is to create blob (png file) from base64 at client side, and send it to server. Edit. All listed code here, exists in stackoverflow posts.

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    var blob = null;
    // TypeError old chrome and FF
    window.BlobBuilder = window.BlobBuilder || 
                         window.WebKitBlobBuilder || 
                         window.MozBlobBuilder || 
                         window.MSBlobBuilder;
    if(window.BlobBuilder){
         var bb = new BlobBuilder();
         bb.append(ab);
         blob = bb.getBlob(mimeString);
    }else{
         blob = new Blob([ab], {type : mimeString});
    }
    return blob;
}

function sendFileToServer(file, url, onFileSendComplete){
   var formData = new FormData()
   formData.append("file",file); 
   var xhr = new XMLHttpRequest();
   xhr.open('POST', url, true);
   xhr.onload = onFileSendComplete;
   xhr.send(formData);
}

var base64 = $('#signature').jSignature("getData");
var blob = dataURItoBlob(base64);
var onComplete = function(){alert("file loaded to server");}
sendFileToServer(blob, "/server", onComplete)

这篇关于通过对PNG格式提交，申请网址太长的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！