php 를 사용 하여 일반적인 파일 업로드 기능 완성(추천)

파일 업 로드 는 이제 흔 하 다.파일 업로드,프로필 업로드 등 브 라 우 저 마다'파일 업로드'효과 가 다르다.
먼저 불 여우 브 라 우 저의 효 과 를 살 펴 보 자.

IE 브 라 우 저 를 보면 다음 과 같 습 니 다.

또 다른 브 라 우 저 들 이 많아 서 일일이 효 과 를 보지 않 습 니 다.그러면 이 업 로드 는 어떻게 이 루어 집 니까?
파일 업로드 기능
(1)첫 번 째 는 이 페이지 를 올 리 는 거 예요.
먼저 폼 요 소 를 써 야 합 니 다.파일 업로드 자연 단추 의 형식 은"file"입 니 다.그 다음 에'업로드'버튼 입 니 다.이것 은 제출 에 사용 해 야 하기 때문에 버튼 유형 은'submit'을 사용 해 야 합 니 다.코드 는 다음 과 같 습 니 다.

<form action="wenjiansccl.php" method="post" enctype="multipart/form-data">  <!--        ，          ：enctype="multipart/form-data"-->
　　<input type="file" name="file"/> //       
　　<input type="submit" value="  " /> //       
</form>

먼저 효과 보기:
　　
(2)두 번 째 는 중요 한 파일 업로드 처리 페이지 입 니 다.
우 리 는 먼저 값 을 업로드 하여 출력 할 수 있 습 니 다.파일 을 업로드 한 후에 어떤 것 이 나타 날 지 볼 수 있 습 니 다.주의 하 는 것 은 파일 의 전송 방식 입 니 다.여 기 는 post 나 get 을 사용 할 수 없습니다.$를 사용 해 야 합 니 다.FILES[""]이 패스 방식.

var_dump($_FILES["file"]);  //       

출력 결 과 는 그림 과 같 습 니 다:

메모:아래 에 이 그림 의 정 보 를 사용 할 수 있 기 때문에 이 그림 에서 제 가 먼저 이름(array)을 지 으 면 다음 에 사용 할 때 설명 할 수 없습니다.
몇 개의 2 차원 배열 을 보기 어렵 지 않 습 니 다.그 중에서 파일 의 이름,유형,저장 위치,오류 정보 와 파일 의 크기 가 있 습 니 다.그러면 실제 파일 은 서버 에 임시로 저 장 됩 니 다.
파일 을 업로드 할 때 4 가지 주의 사항 이 있 습 니 다.
1.파일 업로드 형식 제어
2.업로드 파일 의 크기 조절
3.파일 이름 중복 방지
3.1 저 장 된 파일 이름 수정
   3.11 사용자 이름+타임 스탬프+난수+파일 이름
    3.12 유수 호
3.2 폴 더 사용
  　　  3.21public/lch/2017-2-12/1.jpg
4.파일 저장
이 네 가지 주의 항목(절차 에 해당 함)을 알 았 으 면 한 걸음 한 걸음 처리 페이지 를 작성 하면 됩 니 다.
(1)출력 할 때'오류'항목 이 있 는 것 을 볼 수 있 습 니 다.먼저 전송 에 오류 가 있 는 지 판단 할 수 있 습 니 다.

if($_FILES["file"]["error"]) //          ，       ，   （array）      error
{
  echo $_FILES["file"]["error"];
}

(2)위 는 오류 가 발생 하면 오류 메 시 지 를 출력 하 는 것 입 니 다.오류 가 없 으 면 아래 의 내용 을 진행 하 는 것 입 니 다.주의사항 에 따라 작성 하 세 요.
우선:파일 업로드 의 형식 과 크기 를 제어 합 니 다.(array)그림 에서 형식 type 과 크기 size 를 찾 은 다음 에 원 하 는 형식 값 을 부여 하면 됩 니 다.)jpeg 와 png 두 가 지 를 한정 하 였 습 니 다.여러 가지 입 니 다.'또는'로 쓰 면 됩 니 다.여기 도 if 문 구 를 사용 하여 판단 합 니 다.(파일 형식 이 jpeg 또는 png 이 고 파일 크기 가 1024000 보다 작 으 면 업로드 할 수 있 습 니 다.그렇지 않 으 면 업로드 에 실 패 했 습 니 다)

if($_FILES["file"]["type"]=="image/jpeg" || $_FILES["file"]["type"]=="image/png" && $_FILES["file"]["size"]<1024000)
{<br>　　//    3 4   <br>}
else
{
　　echo "       ！"; 
}

(3)코드 의 주석(주의사항 3 과 4 의 내용)에서 파일 을 쓰기 시작 하여 중복 되 거나 저장 되 지 않도록 합 니 다.
첫째:파일 의 저장 위 치 를 찾 은 다음(어느 위치 에 저장 하고 싶 은 지)파일 이름 을 수정 하 는 방식 을 연결 합 니 다(타임 스탬프 방식 사용)

$filesname = "./files/".date("YmdHis").$_FILES["file"]["name"]; //$_FILES["file"]["name"]       （array）    name

두 번 째:파일 이 존재 하 는 지 판단 합 니 다.(존재 하면 알림,존재 하지 않 으 면 폴 더 에 저장 합 니 다)

if(file_exists($filesname)) //file_exists()  ：        ，             
{
　　echo "      "; //      
}
else
{
　　//    ，    （move_uploaded_file()  ）
　　move_uploaded_file($_FILES["file"]["tmp_name"],$filesname);  //             ，         
}
<span style="font-family:   ; font-size: 15px"><span style="font-size: 18px">  ：</span><br>1.        UTF-8     ，Windows          ，            ，             “      ”<br>    ：</span><span style="font-size: 15px">iconv()  ：</span><span style="font-size: 15px">   3  ，           ，           ，          </span>
$filename = iconv("UTF-8","gb2312",$filesname); //  iconv()   3  ，           ，           ，          
<span style="font-family:   ; font-size: 15px">2.                  ，  move_uploaded_file()  </span>

여기 서 이 파일 을 업로드 하면 끝 납 니 다.한번 시도 해 보 세 요.
2.파일 미리 보기 업로드
사진 을 올 릴 때 효과 가 어떤 지 먼저 보고 올 립 니 다.다음은 사진 미리 보기 기능 입 니 다.
(1)먼저 파일 단 추 를 눌 러 서 파일 을 선택 할 수 있 습 니 다.

<input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> //          

(2)이 그림 을 표시 하 는 div

<div id="uploadPreview"></div>

이것 괜찮아요?

#uploadPreview {
  width: 168px;
  height: 168px;             
  background-position: center center;
  background-size: cover;
  border: 4px solid #fff;
  -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0);
  display: inline-block;<br>}

효과 보기:

그 다음 에 사건 을 썼어 요.

$("#uploadImage").on("change", function(){
  //           
  var files = !!this.files ? this.files : [];
  //           ,           
  if (!files.length || !window.FileReader) return;
  //               
  if (/^image/.test( files[0].type)){
    //       FileReader   
    var reader = new FileReader();
    //           DataURL
    reader.readAsDataURL(files[0]);
    //     ,          div
    reader.onloadend = function(){
    $("#uploadPreview").css("background-image", "url("+this.result+")");
    }
  }
});

이것 은 단지 간단 한 업로드 미리 보기 일 뿐,파일 에 올 린 처리 페이지 는 아직 쓰 지 않 았 으 며,다음 에 완전한 업로드 이미지 코드 를 보충 합 니 다.
선택 한 그림 의 효과 보기

이렇게 해서 파일 업로드 와 사진 미리 보기 가 끝 났 습 니 다.이 두 가 지 를 결합 하면 사진 을 업로드 할 수 있 습 니 다.나중에 저 는 계속 완전 하 게 보충 하 겠 습 니 다~~