Question

相当新，但每天都在学习更多。我正在XDK中创建一个混合应用程序，到目前为止设法使用以下内容将基本数据上传到php服务器;

<script>
        function sendData()
         {
             var xmlhttp;
             if (window.XMLHttpRequest)
                {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
                }
            else
                {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
             xmlhttp.onreadystatechange=function()
             {
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                alert("All Gone");
                }
             }

             var postdata = '{"SBP_UserName": "Phil", "SBP_Title": "Title1"}';
             xmlhttp.open("POST","http://stxxx.co.uk/SBPostPost.php", false);
             xmlhttp.setRequestHeader("Content-type","application/json");
             xmlhttp.send(postdata);
         }
    </script>

问题：我已经搜索了2天而且迷路了。首先 - 可能非常基本 - 如何将我的HTML输入表单中的数据传递给要发送的函数（目前正在进行硬编码，如您所见）;

但最重要的是 - 如何在同一个上传中发送包含输入字段和文件（图形）的表单。

非常感谢任何帮助。

我还在苦苦挣扎......我们非常感谢任何进一步的帮助。

这是我的表格

＆＃13;

<form id="PostData" name="PostData" method = "post" enctype="multipart/form-data">
                         <p>Page Title<p>  
                         <label class="narrow-control label-inline" for="VehicleReg">Vehicle Reg:</label>
                         <input class="wide-control" type="text" name="VehicleReg" id="VehicleReg">
                         
                         <label class="narrow-control label-inline" for="Category">Offense:</label>
                         <select class="wide-control" name="Category" id="Category">
                            <option>Select</option>
                            <option>Opt1</option>
                            <option>Opt2</option>
                         </select>
                         <label class="narrow-control label-inline" for="Details">Details</label>
                         <textarea class="wide-control" rows="4" wrap="soft" name="Details" id="Details"></textarea>
                         <input id="mypic" type="file" accept="image/*;capture=camera" width="50%">    
                         
                        
                        <button onclick="sendData(this.form)">Post</button>
               
</form>

＆＃13;

这里是JS

＆＃13;

<script>
            function sendData(form) 
            {           
            var postform = new FormData(form); 
            var xmlhttp = new XHRObject();                              
            xmlhttp.onreadystatechange=function()
             {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {                    
                //xmlhttp.responsetext will have what is sent back - use Print_R in php                   
                }
             }                            
             xmlhttp.open("POST","http://sxxxx.co.uk/SBPostPost.php", false);
             
             xmlhttp.setRequestHeader("Content-type","multipart/form-data");
             
             // only sends now previous stuff just establishing a connection 
             xmlhttp.send(postform);    
            
            }
                
            
        </script>

＆＃13;

当我在模拟器中运行并查看控制台时 - 它正在与我的后端通信;并且标题包含数据字段，但它在访问已选择的图片时失败（我认为）。错误是http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/ ... ratchdir / e14eb410-7cf2-4bed-ba25-515e6df98e8c / platforms / ios / www / index.html 404（未找到）

有什么想法吗？

Answer 1

英特尔的XDK提供了一个javascript API，您可以利用它来获取此类功能。可以在此处找到如何使用它进行文件上载的示例：

https://software.intel.com/en-us/node/493213

请注意，只有在人行横道上测试应用程序或运行已编译的应用程序时，才能执行某些英特尔XDK功能。

如果您不想使用现有的API，则可以始终使用本机JS或其他JavaScript库。 StackOverflow上已有很多这方面的例子。可以在这里找到一个可靠的例子：

How can I upload files asynchronously?

至于从表单访问数据，您可能需要查看以下内容：

// Vanilla javascript

JavaScript: how to get value of text input field?

var myValue = document.getElementById('textbox_id').value;

//使用jQuery

http://api.jquery.com/val/

XDK中的混合应用程序 - 如何在同一上传中上传表单数据和文件

1 个答案: