web-dev-qa-db-ja.com

ボタンをファイルアップロードボタンとして作成することは可能ですか？

私はphpが初めてです。ユーザーがこのボタンをクリックするとUpload MBとしてボタン値を配置するフォームがあり、ここにファイルアップロードコントロールとユーザーアップロードファイルを配置するWebフォームにリダイレクトします。こちらが画像です

button

このボタンをクリックすると、このフォームでユーザーがリダイレクトされます

upload form

ここでユーザーがファイルをアップロードします。

私の質問

ボタンをファイルアップロードボタンとしてUpload Mbにすることは可能ですか？ファイルアップロードコントロールボタンのように機能しますか？

実際、ユーザーの時間を節約したいです。ユーザーがUpload MBボタンをクリックしても、フォームにリダイレクトされないようにしたい。しかし、ユーザーがUpload MBボタンをクリックすると、ユーザーはファイルをアップロードしてブラウジングウィンドウを開くことができます。その後、ユーザーがファイルをアップロードすると、フォームにリダイレクトされます。

可能かどうか教えてもらえますか？

javascriptphpjqueryformsfile-upload
11
sunny

<input type='file' hidden/>をコードに追加し、ユーザーが"Upload MB"ボタン。

これを確認してください fiddle 。

これがスニペットです。

document.getElementById('buttonid').addEventListener('click', openDialog);

function openDialog() {
  document.getElementById('fileid').click();
}
<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Upload MB' />

完全なコードは次のとおりです。

<html>
    <head> 
        <script>
            function setup() {
                document.getElementById('buttonid').addEventListener('click', openDialog);
                function openDialog() {
                    document.getElementById('fileid').click();
                }
                document.getElementById('fileid').addEventListener('change', submitForm);
                function submitForm() {
                    document.getElementById('formid').submit();
                }
            }
        </script> 
    </head>
    <body onload="setup()">
        <form id='formid' action="form.php" method="POST" enctype="multipart/form-data"> 
            <input id='fileid' type='file' name='filename' hidden/>
            <input id='buttonid' type='button' value='Upload MB' /> 
            <input type='submit' value='Submit' /> 
        </form> 
    </body> 
</html>
22
Shrinivas Shukla

ブートストラップ方法

.choose_file {
    position: relative;
    display: inline-block;   
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
    background: white
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width: 100%;
    height: 100%;
}
<div class="choose_file">
    <button type="button" class="btn btn-default" style="width: 125px;">Choose Image</button>
    <input name="img" type="file" accept="image/*" />
</div>
3
user9050600

トピックへの私の2セント：すべてのコードで、入力をページに追加する必要はありません。

function onClickHandler(ev) {
  var el = window._protected_reference = document.createElement("INPUT");
  el.type = "file";
  el.accept = "image/*";
  el.multiple = "multiple"; // remove to have a single file selection
  
  // (cancel will not trigger 'change')
  el.addEventListener('change', function(ev2) {
    // access el.files[] to do something with it (test its length!)
    
    // add first image, if available
    if (el.files.length) {
      document.getElementById('out').src = URL.createObjectURL(el.files[0]);
    }


    // test some async handling
    new Promise(function(resolve) {
      setTimeout(function() { console.log(el.files); resolve(); }, 1000);
    })
    .then(function() {
      // clear / free reference
      el = window._protected_reference = undefined;
    });

  });

  el.click(); // open
}
#out {
  width: 100px; height: 100px; object-fit: contain; display: block;
}

/* hide if it would show the error img */
#out[src=''] {
  opacity: 0;
}
<img src="" id="out" />
<button onClick="onClickHandler(event)">select an IMAGE</button>

注：すべてのデータを処理する前に、elがガベージコレクションされる場合があります。これをwindow.*に追加すると、Promise処理のために参照が保持されます。

1
BananaAcid
 <html>
 <body>
 <input type="file" id="browse" name="fileupload" style="display: none" onChange="Handlechange();"/>
 <input type="hidden" id="filename" readonly="true"/>
 <input type="button" value="Upload MB" id="fakeBrowse" onclick="HandleBrowseClick();"/>
 </body>
 <script>
 function HandleBrowseClick()
 {
   var fileinput = document.getElementById("browse");
   fileinput.click();
 }

function Handlechange()
{
 var fileinput = document.getElementById("browse");
 var textinput = document.getElementById("filename");
 textinput.value = fileinput.value;
}
</script>
</html>
1
Salim Malik

ボタンをラベルに変換することをお勧めします。ボタンのように見えるように、CSSをラベルに適用します。

例えば-

        <input type="file" id="BtnBrowseHidden" name="files" style="display: none;" />
        <label for="BtnBrowseHidden" id="LblBrowse">
            Browse
        </label>
1
Prasad Shigwan