filepicker.io提交表單過早

我正在使用filepicker.io作爲我網站的較大表單的一部分。我實際上並沒有將文件存儲在表單中，但我將URI的一部分存儲在隱藏的輸入字段中，並將其他信息填充到表單中。我知道挑選文件並存儲它們的腳本是有效的，但這不是問題。當我按一下按鈕，它會提示文件選擇窗口，提示我有這樣的警告：filepicker.io提交表單過早

Are you sure you want to leave this page Filepicker upload does not complete.

和選項，無論是去是留在頁面上。如果我點擊離開，即使表格沒有完全填寫，我也會被轉到表單操作。如果我留下並填寫表格的其餘部分，那麼最後提交hist，沒有任何反應。

我想填寫表單中的filepicker部分，但不提交它，然後最後通過單擊末尾的Go按鈕來提交包含所有信息和隱藏字段的表單。

任何想法？

下面是表單以及運行文件選取器的腳本。

形式

<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]; 
};

來源

2014-07-02 Wold

混亂導致這裏的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

來源

2014-07-03 20:45:01 krystiangw

filepicker.io提交表單過早

回答

相關問題