Question

嘿伙计，所以我对上传有疑问。好的，所以我知道基本上传会像这样

<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）然后只需点击它并用它上传？因为我想在页面上使用一行来完成此操作，例如＆＃34;更改个人资料图片＆＃34;他们选择那个，ka热潮。我不想让它有2个按钮。

Answer 1

您可以隐藏表单，并通过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/

Answer 2

所以你想在一个按钮上提交和上传。像里面的菜单这里是一个演示

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>

使用菜单上传文件

2 个答案: