H5 특성 FormData 를 이용 하여 파일 업 로드 를 새로 고치 지 않 습 니 다.

전에 친구 가 말 한 거 새로 고치 지 않 고 파일 올 리 기.가장 폭력 적 인 해결책 은 인터넷 에서 각종 JS 라 이브 러 리 를 검색 하고 다 중 사진 업로드,미리 보기,심지어 사진 처리 등 특 기 를 첨부 하 는 것 이다.그럼 제3자 라 이브 러 리 에 접촉 하지 않 으 면 ajax 를 이용 하여 만 들 수 있 습 니까?이 문제 에 대해 누군가가 내 놓 은 해결 방안 은 iframe 을 빌 리 는 것 이 므 로 여기 서 는 군말 하지 않 겠 다.그러나 Html 5 는 좋 은 물건 입 니 다.그 는 FormData 를 제 공 했 습 니 다.FormData 는 우리 가 인 자 를 맞 추 는 데 도움 을 줄 수 있 고 심지어 파일 자원 도 제공 할 수 있 습 니 다.이렇게 하면 우 리 는 쉽게$.ajax 로 업 로드 를 새로 고치 지 않 을 수 있 습 니 다.물론 iframe 도 필요 없습니다.
코드
다음은 앞부분 입 니 다.


<!DOCTYLE html>
<meta charset=utf->
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/../jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
  $('#add').submit(function(){
    var data = new FormData($('#add')[]); 
    console.log(data);
    $.ajax({ 
      url: 'ajax.php', 
      type: 'POST', 
      data: data, 
      dataType: 'JSON', 
      cache: false, 
      processData: false, 
      contentType: false, 
      success:function(data){ 
        //alert(data);
        alert("UploadFile Success");
      }  
    }); 
    return false;  
  });
});
</script>
<form id='add'>
<input type="text" name='book'></input>
<input type="file" name='source'></input>
<input type="submit">
</form>

안에 있 는 코드 를 더 이상 설명 하지 않 고 코드 를 한 줄 만 말 하 다.


var data = new FormData($('#add')[0]);

FormData 는 폼 대상 입 니 다.폼 대상 의 폼 도 메 인 을 각각 key=>value 로 만 들 수 있 습 니 다.그럼 우리 스스로 추가 키=>value 를 연결 하 는 것 이 아 닙 니까?답 은 가능 합 니 다.자세 한 내용 은 바 이 두 FormData 를 사용 할 수 있 습 니 다.
그리고 왜$('#add')[0]입 니까?
나 는 js=jQuery[0]만 말 할 수 있다.
PHP 부분


<?php 
  header('Content-Type:application/json; charset=utf-8');
  echo json_encode(array($_FILES,$_REQUEST));
?>

여 기 는 테스트 만 할 게 요.$를 볼 수 있다 면FILES 에 게 올 릴 수 있 는 것 이 있 습 니 다.
테스트 업로드
ajax 가 ajax.php 에 요청 한 것 을 볼 수 있 습 니 다.

preview 를 보면$로 돌아 가 는 것 을 볼 수 있 습 니 다.FILES 에 대한 정보 입 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

h5 자체 적응 js 코드(코드는 모두 절대 포지셔닝으로 다음 js 코드를 추가)

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

H5 특성 FormData 를 이용 하여 파일 업 로드 를 새로 고치 지 않 습 니 다.

좋은 웹페이지 즐겨찾기