javascript - filepicker.io 过早提交表单

Question

我正在使用 filepicker.io作为我网站的更大表单的一部分。我实际上并没有将文件存储在表单中，而是将 URI 的一部分存储在隐藏的输入字段中，以及用户在表单中填写的其他信息。我知道用于选择文件并存储它们的脚本有效，这不是问题所在。当我单击提示文件选择器窗口的按钮时，我收到以下警告提示:

Are you sure you want to leave this page Filepicker 上传未完成。

以及离开或留在页面上的选项。如果我点击离开，即使表格没有完全填写，我也会被带到表格操作。如果我留下来填写表格的其余部分，然后在最后提交，什么也不会发生。

我想在不提交的情况下完成表单的文件选择器部分，然后通过单击结束。

有什么想法吗？

下面是表格和运行文件选择器的脚本。

表单

<form action="/admin/upload" method='post'>
    <h2>Add media:</h2>
    <p><button onclick="pickFile();" >Upload a File:</button><span id="uploadMessage"></span> 
    <input id="URI" type="hidden" name="URI"></p> 
    <input id="filename" type="hidden" name="filename">
    <p><b>note:</b>Files must be either of the .jpg, .jpeg, .png, or .gif format.</p>
    <p>Location: <label><input type="radio" name="location" value="1">All</label>
       <label><input type="radio" name="location" value="2">Here</label>
       <label><input type="radio" name="location" value="3">There</label>
       <label><input type="radio" name="location" value="4">Anywhere</label>
    </p>
    <p>Expiration: <label><input type="datetime" name="dT"></label>

    <p><input type="submit" value="Go"></p>
</form>

脚本

filepicker.setKey("key");

function pickFile() {
     var info = filepicker.pick({
     extensions: ['.jpg', '.jpeg', '.png', '.gif'],
     container: 'window',
     services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'DROPBOX'],
     },
     function(InkBlob){
        console.log(InkBlob.url);
        $('#uploadMessage').html('<b>Successfully uploaded!</b>');
        return [InkBlob.url, InkBlob.filename];
     },
     function(FPError){
         console.log(FPError.toString());
     });

    console.log(info[0]);
    var uri=info[0].substr(info[0].indexOf("file/"));
    console.log(uri);
    document.getElementById('URI').value=uri;
    document.getElementById('filename').value=info[1];
};

Answer 1

Mess 在这里导致 onclick="pickFile() 事件，由于某种原因调用您的表单提交。您可以使用

event.preventDefault();

这些行:

var uri=info[0].substr(info[0].indexOf("file/"));
console.log(uri);
document.getElementById('URI').value=uri;
document.getElementById('filename').value=info[1];

应该放在 onSuccess filepicker 函数中。所以只有上传成功才会被调用。更好的主意是在这里使用 jquery:

var url = InkBlob.url;
$('input[name="URI"]').val(url);

这段代码应该能更好地工作:

filepicker.setKey("key");
$('#filepicker_button').click( function(event) {
    event.preventDefault();
    filepicker.pick(
        {
            extensions: ['.jpg', '.jpeg', '.png', '.gif'],
            container: 'window',
            services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'DROPBOX'],
        },
    function(InkBlob){
        console.log(InkBlob);
        var url = InkBlob.url;
        $('input[name="URI"]').val(url);
        var filename = InkBlob.filename; 
        $('input[name="filename"]').val(filename);
        $('#uploadMessage').html('<b>Successfully uploaded!</b>');
    },
    function(FPError){
        console.log(FPError.toString());
    });

});

并在 html 中添加按钮 id:

<form action="/admin/upload" method='post'>
<h2>Add media:</h2>
<p><button id="filepicker_button">Upload a File:</button><span id="uploadMessage"></span> 
<input id="URI" type="hidden" name="URI"></p> 
<input id="filename" type="hidden" name="filename">
<p><b>note:</b>Files must be either of the .jpg, .jpeg, .png, or .gif format.</p>
<p>Location: <label><input type="radio" name="location" value="1">All</label>
   <label><input type="radio" name="location" value="2">Here</label>
   <label><input type="radio" name="location" value="3">There</label>
   <label><input type="radio" name="location" value="4">Anywhere</label>
</p>
<p>Expiration: <label><input type="datetime" name="dT"></label>

<p><input type="submit" value="Go"></p>

在这种情况下，您还可以应用 filepicker html 小部件。看一看: https://developers.inkfilepicker.com/docs/web/#widgets-pick