Question

如果我点击按钮标签，我想打开图片上传文件对话框。如果可能的话，如何在PHP中这样做

while{
    echo "<td><button><img src='".$cfet['productimage']."' width='50' height='40'></button></td>";
}

Answer 1

在HTML页面上包含输入type="file"元素，并在按钮的click事件中使用jQuery的触发器函数触发输入类型文件元素的click事件

代码如下：

<input type="file" id="imgupload" style="display:none"/> 
<button id="OpenImgUpload">Image Upload</button>

在按钮的点击事件中，写下 jQuery 代码，如：

$('#OpenImgUpload').click(function(){ $('#imgupload').trigger('click'); });

这将打开按钮点击事件的文件上传对话框..

Answer 2

你需要添加一点黑客来实现这一点。

您可以隐藏input type=file后面的文件上传（button）。

并点击按钮，您可以触发文件上传点击。

点击按钮

将打开文件上传窗口

<button id="btnfile"> 
 <img src='".$cfet['productimage']."' width='50' height='40'>
</button> 
<div class="wrapper"> //set wrapper `display:hidden`
     <input type="file" id="uploadfile" /> 
</div>

和一些javascript

$("#btnfile").click(function () {
    $("#uploadfile").click();
});

这是这个例子的小提琴：http://jsfiddle.net/ravi441988/QmyHV/1/embedded/result/

Answer 3

此外，您可以直接在html代码中编写所有内联：

<input type="file" id="imgupload">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">Upload file</a>

返回false; - 点击链接后拒绝锚操作将非常有用。

Answer 4

<input type="file" id="imgupload" style="display:none"/>
<label for='imgupload'> <button id="OpenImgUpload">Image Upload</button></label>

点击 for = 属性将自动关注“文件输入”，并打开上传对话框

Answer 5

  <label for="profileImage"> 
  <a style="cursor: pointer;"><em class="fa fa-upload"></em> Change Profile 
  Image</a></label> 
  <input type="file" name="profileImage" id="profileImage" style="display: none;">

Answer 6

您可以显示具有onclick功能的文件选择对话框，如果选择了文件（onchange事件），则发送表格以上传文件

 <form id='foto' method='post' action='upload' method="POST"  enctype="multipart/form-data" >
  <div style="height:0px;overflow:hidden"> 
  <input type="file" id="fileInput" name="fileInput" onchange="this.form.submit()"/> 
  </div>

  <i class='fa fa-camera' onclick="fileInput.click();"></i>
</form>

Answer 7

<button id="OpenImgUpload" onclick="$('#imgupload').trigger('click');">Image Upload</button>
<input type="file" id="imgupload" style="display:none"/>

Answer 8

HTML代码：

 <form method="post" action="#" id="#">
<div class="form-group files color">
    <input type="file" class="form-control" multiple="">
</div>

CSS：

.files input {
outline: 2px dashed #92b0b3;
outline-offset: -10px;
-webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
transition: outline-offset .15s ease-in-out, background-color .15s linear;
padding: 120px 0px 85px 35%;
text-align: center !important;
margin: 0;
width: 100% !important;
height: 400px;

}

.files input:focus{    
    outline: 2px dashed #92b0b3; 
    outline-offset: -10px;
   -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
    transition: outline-offset .15s ease-in-out, background-color .15s linear;
  border:1px solid #92b0b3;

}

.files{ position:relative}
   .files:after {  pointer-events: none;
     position: absolute;
     top: 60px;
     left: 0;
    width: 50px;
   right: 0;
   height: 400px;
  content: "";
  background-image: url('../../images/');
  display: block;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: no-repeat;

}

.color input{ background-color:#f1f1f1;}
.files:before {
  position: absolute;
  bottom: 10px;
   left: 0;  pointer-events: none;
  width: 100%;
  right: 0;
  height: 400px;
  display: block;
  margin: 0 auto;
  color: #2ea591;
  font-weight: 600;
  text-transform: capitalize;
  text-align: center;

}

Answer 9

<!-- File input (hidden) -->
<input type="file" id="file1" style="display:none"/>    

<!-- Trigger button -->
<a href="javascript:void(0)" onClick="openSelect('#file1')">

<script type="text/javascript">                            
function openSelect(file)
{
  $(file).trigger('click');
}
</script>

打开文件上传对话框，点击图片

9 个答案: