ボタンをクリックしてファイルをアップロードする方法

Question

以下のコードに示すように、ユーザーがビューボタンをクリックしたときにファイルをアップロードしようとしています。私は次のコードを試しました。どんな種類の助けにも感謝します。 ありがとうございます。

#myInput { 
 
    width: 50%; 
 
    padding: 12px 20px 12px 40px; 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
} 
 

 
input[type=file]::-webkit-file-upload-button { 
 
    width: 0; 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    border: none; 
 
    border: 0px; 
 
} 
 

 
x::-webkit-file-upload-button, 
 
input[type=file]:after { 
 
    -webkit-appearance: button; 
 
    -moz-appearance: button; 
 
    border-collapse: separate; 
 
    border-radius: 7px; 
 
    -webkit-border-radius: 7px; 
 
    --moz-outline-radius: 7px; 
 
    content: 'View'; 
 
    color: #080708; 
 
    background: #e3e3e3; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    left: 100%; 
 
    margin-left: 50px; 
 
    position: relative; 
 
    padding: 10px 46px 10px 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="file" name="myInput" id="myInput">

Answer 1

サーバーにファイルをアップロード例えばPHP、および理想的にいくつかのJavaScript検証と同様に、バックエンドのプログラミングを必要とします。この特定のケースでは、CSSは重要ではありません。なぜなら、それは美観のためだけに、仕事のロールを演じないからです。

あなたは作成する必要があります。

1. サーバー上の特定のファイルに理想的なポスト（方法）で、マルチパート/フォームデータ（ENCTYPE）を提出するHTMLフォームを（アクション）

2. アップロードされたファイルを処理し、サーバーのどこかに保存するには、PHPのようなバックエンドプログラミングが必要です。

3. 悪意のあるファイルやデータから身を守るためには、フォーム（JavaScript）とサーバー（PHP）に送信されるファイルとデータを検証する必要があります。

私はこの情報を使用して、タスクを達成する方法をよりよく理解して、より具体的な調査を行うことができます。 http://www.tizag.com/phpT/fileupload.php

グッドラック：ここ

しばらくの周りされているチュートリアルです。

Answer 2

また、あなたは、サーバー上のアップロードファイルを復元するためにPHP（または他のいくつか）が必要です。この

<form action="" enctype="multipart/form-data" method="post"> 
    <input type="file" name="myInput" id="myInput"> 
    <input type="submit" value="submit"> 
</form> 

のようなフォームタグに入力されたタグを配置する必要があります。