이미지 업로드는 프로젝트에서 자주 사용되며, 이미지나 파일 업로드와 분리할 수 있는 프로젝트는 거의 없습니다. 이번 글에서는 기존의 두 가지 업로드 방법을 소개하겠습니다. (참고: 여기서는 기능만 구현하고 프런트 엔드 스타일을 너무 많이 수행하지 않습니다.)
1. 양식을 사용하여 업로드하세요.
이 방법은 가장 독창적인 업로드 방법입니다. 프런트 엔드는 간단한 형식이고 백 엔드에는 전송된 파일을 처리하는 PHP가 있습니다.
먼저 프론트엔드 코드 upload.html을 살펴보세요
<form action="handle.php" name="form" method="post" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" name="submit" value="上传" /> </form>
그런 다음 다음 코드를 사용하여 새로운 PHP 파일인 handler.php를 만듭니다
$file = $_FILES['file'];//得到传输的数据 //得到文件名称 $name = $file['name']; $type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型,并且都转化成小写 $allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型 //判断文件类型是否被允许上传 if(!in_array($type, $allow_type)){ //如果不被允许,则直接停止程序运行 return ; } //判断是否是通过HTTP POST上传的 if(!is_uploaded_file($file['tmp_name'])){ //如果不是通过HTTP POST上传的 return ; } $upload_path = "D:/now/"; //上传文件的存放路径 //开始移动文件到相应的文件夹 if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){ echo "Successfully!"; }else{ echo "Failed!"; }
물론, 이 PHP 처리 코드는 그다지 완전하지 않으며, 오류 상황이 처리되지 않습니다. 그러나 업로드된 파일을 PHP를 사용하여 처리하는 원리는 이렇습니다. 이를 기반으로 최적화하여 더욱 완벽하게 만들 수 있습니다.
2. 새로 고침 없이 진행률 표시줄을 사용하여 업로드하려면 uploadify를 사용하세요
먼저 업로드 플러그인을 다운로드하고 프로젝트 폴더에 저장한 뒤 파일 3개를 소개합니다
<link href="js/uploadify/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/uploadify/jquery.min.1.7.js"></script> <script type="text/javascript" src=js/uploadify/jquery.uploadify.min.js"></script>
그런 다음 다음 코드를 인용하세요
<script type="text/javascript"> $(function(){ $(".uploadbutton").each(function(){ bidtype="上传"; $(this).uploadify({ swf: 'js/uploadify/uploadify.swf', uploader: "handle.php", //处理上传的php文件或者方法 multi: true, //是否开启一次性上传多个文件 queueSizeLimit:20, //最大允许上传的文件数量 buttonText: bidtype, //按钮文字 height: 34, //按钮高度 width: 82, //按钮宽度 auto:false, //选择完图片以后是否自动上传 method:'post', fileTypeExts: "*.jpg;*.png;*.gif;*.jpeg;", //允许的文件类型 fileTypeDesc: "请选择图片文件", //文件说明 postData:{}, formData: { "imgType": "normal","timestamp":"asdfsa","token":"48f262516b3912a060d21ef6af564668" }, //提交给服务器端的参数 onUploadSuccess: function (file, data, response) { //一个文件上传成功后的响应事件处理 var data = $.parseJSON(data); } }); }) }); </script> <body> <span id="commercial_upload" class="uploadbutton"></span> </body>
스타일은 다음과 같습니다
물론 이 버튼의 스타일을 변경했습니다. 필요에 따라 스타일 파일을 수정하고 이 버튼의 스타일을 변경할 수 있습니다.
동일한 PHP 코드인 handler.php
$file = $_FILES['Filedata'];//得到传输的数据 //得到文件名称 $name = $file['name']; $type = strtolower(substr($name,strrpos($name,'.')+1)); //得到文件类型,并且都转化成小写 $allow_type = array('jpg','jpeg','gif','png'); //定义允许上传的类型 //判断文件类型是否被允许上传 if(!in_array($type, $allow_type)){ //如果不被允许,则直接停止程序运行 return ; } //判断是否是通过HTTP POST上传的 if(!is_uploaded_file($file['tmp_name'])){ //如果不是通过HTTP POST上传的 return ; } $upload_path = "D:/now/"; //上传文件的存放路径 //开始移动文件到相应的文件夹 if(move_uploaded_file($file['tmp_name'],$upload_path.$file['name'])){ echo "Successfully!"; }else{ echo "Failed!"; }
프런트 데스크에 표시되는 스타일이 다르다는 점을 제외하면 위 두 가지 업로드 방법의 PHP 처리 원리는 동일하다고 할 수 있습니다. 두 번째 방법은 새로 고침이 없으며 반환 값이 있을 수 있습니다. 다른 처리를 수행하는 데 도움이 됩니다. 일반적으로 사용되지만 항상 제한적이며 사용하기가 매우 유연하지 않습니다.
HTML5의 개발이 점점 더 성숙해짐에 따라 h5의 일부 메소드를 사용하여 업로드 기능을 구현할 수 있습니다. 이때 백그라운드 PHP 처리 코드는 위의 두 가지 메소드와 완전히 다르며 사용이 매우 유연합니다. 공간적 제약으로 인해 이 글에서는 이 방법을 소개하지 않겠습니다. 관심이 있으시면 새로 고침 없이 이미지를 업로드하는 방법에 대한 PHP html5 튜토리얼을 참조하세요. 당신이 그것을 좋아하길 바랍니다.