여러 개의 단일 업로드를 실행하기 위해 html5 다중 속성 사용

Question

혼란스러운 제목 죄송합니다.

하나의 파일 입력 (사용자가 여러 파일을 선택할 수 있도록 여러 속성 세트가있는)이있는 form-form1이 있습니다. 양식이 제출되지 않습니다.

하나의 파일 입력이있는 form2가 있습니다. 여러 속성이 없습니다.

javascript를 통해 이전 양식의 fileinput에서 각 파일을 가져온 다음 form2의 입력 필드에 파일을 할당 한 다음 ajax를 제출하고 싶습니다. 아약스 제출이 완료되면 두 번째 파일과 세 번째 파일을 동일하게 처리하고 싶습니다.

플래시 또는 자바 애플릿을 사용하고 싶지 않습니다. IE가 다중 속성을 지원하지 않는다는 것을 충분히 알고 있습니다. 오페라는 동일한 최소 무효 속성을 사용할 수 있습니다.

내 기본적인 질문은

이에 대한 해결책이 있습니까 .. Form1에 입력 필드에서 파일을 가져오고 다음을 Form2의 필드에 assisgn하는 방법 있을까요? 또는 내 접근 자체가 올바르지 않습니까?

UI 측면에서 달성하고 싶은 점은 무엇입니까? 파일이 업로드되고 서버가 일부 처리를 수행하고 일부 데이터를 반환합니다. 그래서 내가 원하는 것은 사용자가 10 파일을 선택할 수 있지만 첫 번째 파일이 업로드 되 자마자 출력이 수신됩니다.

Answer 1

첫 번째 : 내 아이디어가 잘못되었습니다. type = file 인 입력에 javascript를 통해 값을 할당 할 수 없습니다.

나는 XMLHttpRequest를 사용하는 또 다른 아이디어를 생각했다. 여기 내 코드 :

<form id="new_picture_form" method="post" enctype="multipart/form-data" action="some url" accept-charset="UTF-8"> 
<input id="original_input" class="file_hidden" type="file" onchange="handleFiles(this.files);" name="picture[image][]" multiple="multiple"> 
</form> 
<form id="fileinfo" method="post" enctype="multipart/form-data" action="some url"> 
</form> 

<script type="text/javascript"> 
    function handleFiles(files) 
    { 

    for (var i = 0; i < files.length; i++) { 
    FileUpload(files[i]) 
    } 
    } 

    function FileUpload(file) { 

var data = new FormData(document.getElementById("fileinfo")); 
    var xhr = new XMLHttpRequest(); 
    this.xhr = xhr; 


data.append('some field',"that you want to pass as param ") 
data.append('type',"picture") 
data.append("picture[image]", file); 
    xhr.open("POST", "URL",true); 
    xhr.send(data); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 

    eval(xhr.responseText) // basically the result from server contains some script 
    } 
    } 


} 


</script>