<input type =「file」>帶有扭曲的默認值

Question

從閱讀堆棧和網頁我收集您不能預先填充此選項出於安全原因。不過，我有許多用戶需要填寫的頁面表單。通過保留其他變量作爲會話變量，我可以讓頁面記住他們以前的條目，並在該頁面被回叫，文本框，按鈕等時重新顯示它們。沒有弄清楚如何對文件名輸入表單組件做同樣的處理。任何想法，如果有解決方法？

Answer 1

如果圖片已經上傳並且提供上傳新圖片的選項，您需要在邏輯服務器端顯示上傳圖片的縮略圖，此時您將顯示一個空文件輸入。喜歡的東西...

if(sessioncontains("uploaded")) { 
    out << "<img src=\"" + (sessionget("uploaded")->thumb) + "\"/>"; 
    out << "<label>Upload a new image</label>"; 
} else { 
    out << "<label>Upload an image</label>"; 
} 
out << "<input type=\"file\"/>"; 

編輯所以你要保存的字段的值提交之前，你可以只發布了他們對幕後的服務器。 How can I upload files asynchronously?。或者您可以將它們序列化爲window.localStorage作爲數據URL（注意存儲限制）。

的Javascript ...

function retrieveFiles() { 
    var files = []; 
    var json = window.localStorage.getItem("files"); 
    if(json.length) { 
     try { 
      files = JSON.parse(json); 
     } catch(ex) { 
      console.err("There was an error", files, window.localStorage); 
     } 
    } 
    return files; 
} 

function storeFiles(files) { 
    window.localStorage.setItem("files", JSON.stringify(files)); 
} 

$(function() { 

    var arr = retrieveFiles(); 

    $("#file").on("change", function() { 
     var files = $(this).prop("files"); 
     var reader = new FileReader(); 
     reader.onload = function(e) { 
      arr.push(e.target.result); 
      storeFiles(arr); 
     } 
     for(var i = 0; i < files.length; ++i) { 
      reader.readAsDataURL(files[i]); 
     } 
    }); 

    $("form").on("submit", function() { 
     // Post files array arr by AJAX 
    }); 

}); 

HTML ...

<form action="upload" method="post" enctype="multipart/form-data"> 
    <input type="file" id="file" multiple/> 
    <button type="submit">Submit</button> 
</form>