기 존의 폼 대신 Ajax 를 사용 하여 제출 합 니 다.

1656 단어 JavaScript
목적: ajax 로 파일 업 로드 를 실현 하여 사용자 의 사용 느낌 을 향상 시 킵 니 다.
단계:
  • 전통 적 인 form 폼 형식의 sumbit 제출 방식 을 button 또는 링크 로 대체 합 니 다.
  • button 단추 만 들 기 
    •
  • 클릭 이벤트 만 들 기 
    • /*      */
$('#upJQuery').on('click', function () {
    $('#upJQuery').after('');
    $('#upfile').click();

});
  • 단 추 를 누 르 면 button 단추 뒤에 파일 업로드 폼 을 숨 기 고 이벤트 click () 을 모 의 한 다음 uploadFile () 함수, 파일 전송 작업 이전
    • 을 촉발 합 니 다.
    function uploadFile() {
    var fd = new FormData();
    fd.append("file", $("#upfile").get(0).files[0]);
    var url = app.config.basicRequestUrl + '/withdrawCash/import';
     $.ajax({
        url: url,
        type: "POST",
        processData: false,
        contentType: false,
        data: fd,
        success: function (result) {
            //    
        },
        error: function (result) {
           //    
        }
    });
}
  • 구현 은 FromData 대상 (FormData 대상 이 데이터 컴 파일 링 키 를 맞 추 는 형식 으로 append () 방법 으로 데 이 터 를 채 우 는 것 입 니 다. $("\ upfile"). get (0). files [0] 는 jquery 대상 의 첫 번 째 장 치 를 자바 스 크 립 트 대상 으로 바 꾼 후 첫 번 째 파일 을 가 져 오 는 것 을 의미 합 니 다. ajax 는 파일 을 보 냅 니 다. processData: false 는 보 낸 데 이 터 를 처리 하지 않 겠 다 고 표시 합 니 다. 기본 값 은 true 입 니 다.data 의 데 이 터 를 직렬 화 처리 하 는 것 을 나타 낸다.contentType: false 는 콘 텐 츠 형식 을 설정 하지 않 고 jquery 의 무분별 한 조작 으로 인해 서버 가 파일 의 시작 위 치 를 식별 하지 못 하 는 것 을 방지 합 니 다.

    • 2. 서버 는 일반적인 폼 업로드 형식 으로 받 으 면 됩 니 다.
    ajax 302 오류 점프 불가
    Ajax 보충 (1)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage