집 > 기사 > 백엔드 개발 > ajax+php를 사용하여 파일 업로드

ajax+php를 사용하여 파일 업로드

零到壹度원래의: 2018-04-12 09:14:099887검색

이론적으로 이러한 파일/이미지 업로드 플러그인은 이미 많이 있지만, 사용 중에 호환성 문제, 배경 문제~~등 여러 가지 문제가 계속 발생하게 되므로 다른 사람의 바퀴이므로 제가 할 수 없다면 잘 사용하겠습니다. 제가 직접 만들어 보겠습니다.

이 글에서는 업로드 기능을 구현하기 위해 jq.ajax와 php를 사용했습니다. 프런트엔드 코드는 일반적으로 동일합니다. 일부 파트너는 백엔드에서 php를 사용하지 않습니다. 작업.

먼저 렌더링을 살펴보겠습니다. 전체 업로드 인터페이스는 다음과 같습니다. 데모 보기

전체 아이디어:

1 입력 설정 만들기: 유형=파일, ID=파일, 스타일 설정 불투명도:0, 위치: 절대

2. 위치를 절대값으로 설정하고 z-index가 파일보다 큽니다

3. FormData 개체를 생성하고 파일을 데이터로 넣습니다

4. ajax를 사용하여 FormData 데이터를 upload.php로 보내고, 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: &#39;microsoft yahei&#39;;
    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(&#39;file&#39;);
        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;;
}
?>

Reposted from the blog

저자: Imin

Link:http://blog.xuxiangbo.com/im-22.html

이 기사에서 사례를 읽었다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!