javascript - 通过Ajax发送图片到API

Question

我正在尝试调用此 web service识别图片中的文本(OCR)，但使用jQuery中提供的示例时调用总是失败并出现此错误

System.InvalidOperationException: No file uploaded or URL provided ↵
bei OCRReaderMVCWeb.Controllers.OCRAPIController.Parse() in d:\3bitbucket\1ocr.aaaa.com\OCRReaderMVCWeb\Controllers\OCRAPIController.cs:Zeile 243.

文档:https://ocr.a9t9.com/OCRAPIAPI 只接受四个参数:

• apiKey:“helloworld”(免费许可)
• 文件:上传jpg图片
• url: 远程图片的位置
• 语言:默认为“eng”英语

我已经尝试使用带有 curl 命令的 API 并且工作正常，以及使用下面代码片段中注释的 url。我知道您不能在没有 iframe 的情况下使用 jQuery 提交文档，因此提供的示例不正确。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        //Prepare form data
        var formData = new FormData();
        formData.append("file", "@5.jpg");
        //formData.append("url", "http://i.telegraph.co.uk/multimedia/archive/02007/Plate-1_2007614b.jpg"); //url of remote image
        formData.append("language", "eng");
        formData.append("apikey", "helloworld");
		
        //Send OCR Parsing request asynchronously
        jQuery.ajax({
            url: "https://ocr.a9t9.com/api/Parse/Image",
            data: formData,
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            type: 'Post',
            success: function (ocrParsedResult) {
                //Get the parsed results, exit code and error message and details
                var parsedResults = ocrParsedResult["ParsedResults"];
                var ocrExitCode = ocrParsedResult["OCRExitCode"];
                var isErroredOnProcessing = ocrParsedResult["IsErroredOnProcessing"];
                var errorMessage = ocrParsedResult["ErrorMessage"];
                var errorDetails = ocrParsedResult["ErrorDetails"];
                
                //If we have got parsed results, then loop over the results to do something
                console.log("success? " );
                if (parsedResults != null) {
                    
                    //Uncomment these lines if parsing multiple results
                    $.each(parsedResults, function (index, value) {
                        var exitCode = value["FileParseExitCode"];
                        var parsedText = value["ParsedText"];
                        var errorMessage = value["ParsedTextFileName"];
                        var errorDetails = value["ErrorDetails"];
                        console.log("text: " + parsedText);
                        var pageText = '';
                        switch (+exitCode) {
                            case 1:
                                pageText = parsedText;
                                break;
                            case 0:
                            case -10:
                            case -20:
                            case -30:
                            case -99:
                            default:
                                pageText += "Error: " + errorMessage;
                                break;
                        }

                    });
                }
            }
        });
    </script>

Answer 1

解决方案:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
  
            function uploadPicture()
            {
                //Prepare form data
                var formData = new FormData();
                formData.append("file", $("#inputFileToLoad")[0].files[0]);
                //formData.append("url", "http://i.telegraph.co.uk/multimedia/archive/02007/Plate-1_2007614b.jpg"); //url of remote image
                formData.append("language", "eng");
                formData.append("apikey", "helloworld");
                callService(formData);                     
            }
            
            function callService(formData)
            {
                //Send OCR Parsing request asynchronously
                jQuery.ajax({
                    url: "https://ocr.a9t9.com/api/Parse/Image",
                    data: formData,
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    type: 'POST',
                    success: function (ocrParsedResult) {
                        //Get the parsed results, exit code and error message and details
                        console.log("Success!");
                        var parsedResults = ocrParsedResult["ParsedResults"];
                        var ocrExitCode = ocrParsedResult["OCRExitCode"];
                        var isErroredOnProcessing = ocrParsedResult["IsErroredOnProcessing"];
                        var errorMessage = ocrParsedResult["ErrorMessage"];
                        var errorDetails = ocrParsedResult["ErrorDetails"];
                        //If we have got parsed results, then loop over the results to do something
                        if (parsedResults != null) {
                            //Uncomment these lines if parsing multiple results
                            $.each(parsedResults, function (index, value) {
                                var exitCode = value["FileParseExitCode"];
                                var parsedText = value["ParsedText"];
                                var errorMessage = value["ParsedTextFileName"];
                                var errorDetails = value["ErrorDetails"];
                                
                                console.log("OCR: " + parsedText);
                                $("#text").html( parsedText);
                            });
                        }
                    }
                });   
            }            
</script>

  <p>Select a File to Load:</p>
    <input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
    <p>File Contents as DataURL:</p>
    <textarea id="textAreaFileContents" style="width:640;height:240"></textarea>
    <p>OCR</p>
    <input type="submit" onclick="uploadPicture();" value="OCR" />
    <div id="text"></div>