使用菜單上傳文件

-1

嘿傢伙，所以我對上傳有問題。好了，所以我知道基本的上傳會去像這樣使用菜單上傳文件

<form action="upload.php" method="post" enctype="multipart/form-data"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form>

再小的PHP腳本上傳的實際文件（保存等）現在的問題是，我不希望使用的輸入做這有沒有辦法做到這一點沒有輸入？如有一個菜單（段落href），那麼只需點擊它並使用它來上傳？因爲我想在頁面上使用一行代碼來完成此操作，例如「更改個人資料圖片」，他們選擇了這一項，即熱潮。我不想爲它有2個按鈕。

來源

2016-09-26 Senior Gamer

你需要''上傳上傳。期。 –

你可以用任何你想要的方式來設計窗體的樣式， – nogad

嗯，當我選擇「選擇圖片」時，它會消失，「Upload」會出現，但問題是，我不能刪除「沒有選擇文件」 –

可以隱藏表單，並有任何元素通過JavaScript/jQuery的觸發它：

///html 

    <p class="form"> 
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt perferendis harum laboriosam, tempora expedita, quis reiciendis quos, vel non inventore voluptate velit? Expedita, asperiores impedit. 
</p> 
<form action="//" method="post" enctype="multipart/form-data" style="display: none"> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 

///javascript 
$(document).ready(function(){ 
    $('.form').on('click', function(e){ 
    e.preventDefault(); 
    $('#fileToUpload').trigger('click'); 
    }) 
})

https://jsfiddle.net/x3fecnqy/

來源

2016-09-26 20:53:25 Fhtagn

所以你要提交和上傳一個按鈕。就像裏面的菜單這裏是一個演示

fiddleWithOutPrivew如果你想用拇指展示 - 這裏的另一個FiddlewithTHumbview

$('#upload').on('click', function() { 
 
    $('#fileToUpload').trigger('click'); 
 

 
}); 
 
$('#upload').change(function() { 
 
    $('#img_up').submit(); 
 
});

form { 
 
    display: none; 
 
} 
 

 
header { 
 
    background-color: #333; 
 
    padding: 10px 0; 
 
} 
 

 
header ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
} 
 

 
header ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 10px; 
 
} 
 

 
.menu a { 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.menu a:hover, 
 
.menu a:focus, 
 
.menu a:active { 
 
    color: #bbb; 
 
}

<script 
 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
 
    crossorigin="anonymous"></script> 
 

 
    <header class="header"> 
 
    <ul class="menu"> 
 

 
    <li><a id="upload" href="#">upload</a></li> 
 
    <li><a href="#">test</a></li> 
 
    </ul> 
 
</header> 
 

 
<form action="//" method="post" enctype="multipart/form-data" id="img_up"> 
 

 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
 
    <input type="submit" value="Upload Image" name="submit"> 
 
</form>

來源

2016-09-26 23:11:01

使用菜單上傳文件

回答

相關問題