Question

我有一个包含多个字段的表单。其中一个字段是输入文件字段，用户可以在其中上载JSON文件。 我的需要：当按下按钮（不提交表单）时，我需要获取该输入文件字段并将其传递给执行它的函数，但不提交表单本身。

<form action=''>
    <input type="text" name="abc">
    <input type="text" name="cde">
    <input type='file' name='import' />
        <button class="button" type='submit' name='restore'>
            <span class="icon-upload"> </span> Restore
        </button>
    <input type="submit" value="Submit">
</form>

我怎样才能实现它？

Answer 1

您需要使用javascript捕获按钮单击，最好是jquery，并通过ajax将其发布到php脚本。查找＆＃34; ajax＆＃34;在jquery上。

在您的文件中包含jquery 然后将输入和按钮更改为：

<input type='file' id="myinput" name='import' />
<button class="button" id="ajaxsubmit">restore</button>

之后，添加ajax调用（从api.jquery.com读取示例代码）：

$("#ajaxsubmit").click(function(e){
    e.preventDefault();
    var formData = new FormData($('form')[0]);
  $.ajax({
        type: "POST",
        url: "receiver.php",
        data: formData,
        cache: false,
        contentType: false,
        processData: false    
  });
});

最后设置你的php文件receiver.php，你可以像处理表单一样处理你收到的文件数据。

http://jsfiddle.net/9nfn2Las/

Answer 2

您可以使用

var form = document.forms.formName("fileinput"); \\ change the form name and the file input
form.addEventListener('submit', function(ev) {

var
oOutput = document.getElementById("output"),
oData = new FormData(document.forms.formNAme("fileinput"));

oData.append("CustomField", "This is some extra data");\\if you need to...

var oReq = new XMLHttpRequest();
oReq.open("POST", "thepphpfile.php", true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
  oOutput.innerHTML = "Sent!";
} else {
  oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>";
}
};

oReq.send(oData);
ev.preventDefault();
}, false);

在提交表单本身之前按下表单内的按钮来执行php代码

2 个答案: