ajax+phpを使用してファイルをアップロードします

理論的には、そのようなファイル/画像アップロードプラグインはすでにたくさんありますが、互換性の問題、バックグラウンドの問題~~など、使用中にさまざまな問題が発生する可能性があります。上手に使ってください、私も作ります。

この記事では、アップロード機能の実装に jq.ajax と php を使用します。フロントエンド コードは通常同じです。一部のパートナーはバックエンドで php を使用しません。詳しくは、お使いの言語のドキュメントを参照してください。手術。

最初にレンダリングを見てみましょう。アップロード インターフェイス全体は次のようになります: デモを見る

全体的なアイデア:

1. 入力設定 type=file、id=file、style 設定を作成します。 opacity:0、position:absolute

2.マスクレイヤーを作成し、position:absoluteとz-indexをfileより大きく設定します

3.FormDataオブジェクトを作成し、ファイルをデータとしてFormDataに置きます

4. ajax を使用して、Upload.php に FormData データを送信し、ajax の進行状況イベントを監視し、アップロードの進行状況をリアルタイムで返します

5. サーバーの応答を HTML ページに出力します

6. アップロードが完了したら、「」をクリックします。 [アップロードを続行] ボタンをクリックしてファイル選択ボックスを開き、アップロードを続行します。

HTML 部分、比較的シンプル:

<p class="upload"> <p class="uploadBox">
    <span class="inputCover">选择文件</span>
	<form enctype="">
	    <input type="file" name="file" id="file" />
	    <button type="button" class="submit">上传</button>
	</form>
	<button type="button" class="upagain">继续上传</button>
	<span class="processBar"></span>
	<span class="processNum">未选择文件</span>
    </p>
</p>

CSS、スタイルは個人の好みに応じて自由に調整できます。ここでは参照のみです:

*{
    font-family: 'microsoft yahei';
    color: #4A4A4A;
}
.upload{
    width: 700px;
    padding: 20px;
    border: 1px dashed #ccc;
    margin: 100px auto;
    border-radius: 5px;
}
.uploadBox{
    width: 100%;
    height: 35px;
    position: relative;
}
.uploadBox input{
    width: 200px;
    height: 30px;
    background: red;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 201;
    opacity: 0;
    cursor: pointer;
}
.uploadBox .inputCover{
    width: 200px;
    height: 30px;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 200;
    text-align: center;
    line-height: 30px;
    font-size: 14px;
    border: 1px solid #009393;
    border-radius: 5px;
    cursor: pointer;
}
.uploadBox button.submit{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 230px;
    top: 2px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.submit:hover{
    background: #E0E0E0;
}
.uploadBox button.upagain{
    width: 100px;
    height: 30px;
    position: absolute;
    left: 340px;
    top: 2px;
    display: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #F0F0F0;
    outline: none;
    cursor: pointer;
}
.uploadBox button.upagain:hover{
    background: #E0E0E0;
}
.processBar{
    display: inline-block;
    width: 0;
    height: 7px;
    position: absolute;
    left: 500px;
    top: 14px;
    background: #009393;
}
.processNum{
    position: absolute;
    left: 620px;
    color: #009393;
    font-size: 12px;
    line-height: 35px;
}

JS 部分、jq.ajax:

$(document).ready(function(){
    var inputCover = $(".inputCover");
    var processNum = $(".processNum");
    var processBar = $(".processBar");
    //上传准备信息
    $("#file").change(function(){
        var file = document.getElementById('file');
        var fileName = file.files[0].name;
	var fileSize = file.files[0].size;
        processBar.css("width",0); 
        //验证要上传的文件
	if(fileSize > 1024*2*1024){
	    inputCover.html("<font>文件过大，请重新选择</font>");
	    processNum.html(&#39;未选择文件&#39;);
	    document.getElementById(&#39;file&#39;).value = &#39;&#39;;
	    return false;
	}else{
	    inputCover.html(fileName+&#39; / &#39;+parseInt(fileSize/1024)+&#39;K&#39;);
	    processNum.html(&#39;等待上传&#39;);
	}
    })

    //提交验证
    $(".submit").click(function(){
	if($("#file").val() == &#39;&#39;){
            alert(&#39;请先选择文件！&#39;);
	}else{
	    upload();
	}
    })

    //创建ajax对象，发送上传请求
    function upload(){
        var file = document.getElementById(&#39;file&#39;).files[0];
	var form = new FormData();
	form.append(&#39;myfile&#39;,file);
	$.ajax({
	    url: &#39;upload.php&#39;,//上传地址
	    async: true,//异步
	    type: &#39;post&#39;,//post方式
	    data: form,//FormData数据
	    processData: false,//不处理数据流 !important
 	    contentType: false,//不设置http头 !important
 	    xhr:function(){//获取上传进度            
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener(&#39;progress&#39;,function(e){//监听progress事件
                    var loaded = e.loaded;//已上传
                        var total = e.total;//总大小
                        var percent = Math.floor(100*loaded/total);//百分比
                        processNum.text(percent+"%");//数显进度
                        processBar.css("width",percent+"px");//图显进度}, false);
                }
                return myXhr;
            },
 	    success: function(data){//上传成功回调
 		console.log("文档当前位置是："+data);//获取文件链接
 		document.cookie = "url="+data;//此行可忽略
 		$(".submit").text(&#39;上传成功&#39;);
 		$(".upagain").css("display","block");
             }
	})
    }

    //继续上传
    $(".upagain").click(function(){
	$("#file").click();
	processNum.html(&#39;未选择文件&#39;);
        processBar.css("width",0); 
        $(".submit").text(&#39;上传&#39;);
	document.getElementById(&#39;file&#39;).value = &#39;&#39;;
	$(this).css("display","none");
    })
})

アップロード完了、アップロード.php はファイルを処理します (サーバーのセキュリティのため、コード スニペットのみが投稿されます):

<?php  
if(isset($_FILES["myfile"])){  
    move_uploaded_file($_FILES["myfile"]["tmp_name"],"ajax/".$_FILES["myfile"]["name"]);
    echo "http://www.xuxiangbo.com/ajax/".$_FILES["myfile"]["name"];
}else{
    echo &#39;no file&#39;;
}
?>

ブログからの転載

著者: Imin

リンク:http://blog.xuxiangbo.com/im-22.html

この記事の事例を読んだことがあるはずです。あなたはその方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

PHP + ファイルのアップロードとダウンロードを実装する sftp

php でランダムな単語を含む文字列を生成する 4 つの方法

以上がajax+phpを使用してファイルをアップロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。