> 웹 프론트엔드 > JS 튜토리얼 > js를 사용하여 양식에 여러 파일 업로드를 구현하는 예제 코드

js를 사용하여 양식에 여러 파일 업로드를 구현하는 예제 코드

零下一度
풀어 주다: 2017-05-12 09:46:52
원래의
1988명이 탐색했습니다.

이 글은 주로 JavaScript양식의 다중 파일 업로드를 구현하는 방법을 자세히 소개합니다. 관심 있는 친구들은 참고할 수 있습니다.

양식 양식의 다중 파일 업로드, 구체적인 내용은 다음과 같습니다

formData 객체는 일련의 키-값 쌍을 사용하여 완전한 양식을 시뮬레이션한 다음 Ajax를 사용하여 form

양식을 사용하여 FormData 개체를 초기화하여 파일을 업로드합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<!--文件上传-->

 <form id="uploadForm" enctype="multipart/form-data">

 <p class="row" style="margin-top: 20px;">

  <p class="form-group col-md-12" id="file">  

   <input type="hidden" name="_csrf-application"

     value="<?= $csrf ?>">

   <p class="form-group field-uploadform-excelfiles" style="margin-left: 30px;">

    <label class="control-label btn btn-primary"

      for="uploadform-excelfiles">选择文件</label>

    <input type="file" id="uploadform-excelfiles" name="UploadForm[excelFiles][]"

      multiple class="attachment-upload" accept=".xlsx">

    <input type="button" id="fileUpload" value="上传文件" class="btn btn-success" style="margin-left: 15px;">

    <p class="help-block"></p>

    <p id="fileName"></p>

   </p>

 

  </p>

 </p>

 <table role="presentation" class="table"><tbody id="files"></tbody></table>

</form>

로그인 후 복사

참고:

1. formData 객체를 사용하여 양식을 업로드하는 경우 enctype="multipart/form-data" 속성을 양식에 추가해야 합니다
2. 양식에 따라 이름에 따라 값을 입력해야 합니다. 작업을 사용하여 업로드를 시작할 수 없습니다. 나중에 업로드할 때 업로드된 데이터에 오류가 발생할 수 있습니다.

변경 이벤트로 변경된 파일 가져오기

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

var fileList;

var allFile = [];

//FormData对象初始化

var form = document.getElementById("upload-form");

var formData = new FormData(form);

$("#uploadform-excelfiles").on(&#39;change&#39;, function (e) {

 //获取表单数据并传入formData中

 var norm = $("#norm").val();

 var major = $("#major").val();

 var type = $("#type").val();

 formData.set("norm",norm);

 formData.set("major",major);

 formData.set("type",type);

 

 var fileError = 0;

 fileList = e.currentTarget.files;

 $.each(fileList, function (index, item) {

  var fileName = item.name;

  var fileEnd = fileName.substring(fileName.indexOf("."));

  //上传文件格式判断

  if (fileEnd == ".xlsx") {

   allFile.push(item);

   $(&#39;#files&#39;).append( &#39;<tr style="padding-top: 7px;">&#39; +

        &#39;<td>&#39;+fileName+&#39;</td>&#39; +

        &#39;<td>&#39;+(item.size / 1024).toFixed(2)+&#39;K</td>&#39; +

        &#39;<td><input type="button" class="btn btn-danger delete" value="删除"></td>&#39; +

        &#39;</tr>&#39;);

   //追加文件

   formData.append(&#39;UploadForm[excelFiles][]&#39;,item);

  } else {

   fileError++;

  }

 });

 if (fileError > 0) {

  alert("只能上传 “.xlsx” 格式的文件!");

  document.getElementById("upload-form").reset();

  return;

 }

 

 var fileCount = $(&#39;#files&#39;).find(&#39;tr&#39;).length;

 $(&#39;#fileName&#39;).html(&#39;共上传 &#39; + fileCount + &#39; 个文件&#39;);

 

});

로그인 후 복사

삭제버튼이벤트

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

$(&#39;#files&#39;).on(&#39;click&#39;,&#39;.delete&#39;,function (e) {

  var saveFile = [];

  var norm = $("#norm").val();

  var major = $("#major").val();

  var type = $("#type").val();

  var deleteName = e.target.parentNode.previousElementSibling.previousElementSibling.textContent;

  var deleteIndex;

  //将不删除的放入数组中

  $.each(allFile,function (index, item) {

   if(item.name == deleteName){

     deleteIndex = index;

   }else {

    saveFile.push(item);

   }

  });

  allFile.splice(deleteIndex,1);

  //表单数据重置

  formData.set("norm",norm);

  formData.set("major",major);

  formData.set("type",type);

  formData.delete(&#39;UploadForm[excelFiles][]&#39;);

  //将不删除的数组追加的formData中

  $.each(saveFile,function (index, item) {

   formData.append(&#39;UploadForm[excelFiles][]&#39;,item);

  });

 

  e.target.parentNode.parentNode.remove();

  var fileCount = $(&#39;#files&#39;).find(&#39;tr&#39;).length;

  $(&#39;#fileName&#39;).html(&#39;共上传 &#39; + fileCount + &#39; 个文件&#39;);

 

 });

로그인 후 복사

파일 업로드 이벤트

rree

[관련 추천]

무료 js 온라인 동영상 튜토리얼

2. JavaScript 중국어 참조 매뉴얼

3. php.cn Dugu Jiujian (3) - JavaScript 동영상 튜토리얼

위 내용은 js를 사용하여 양식에 여러 파일 업로드를 구현하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿