Javascript y la carga de archivos no funciona como se esperaba con click()

Question

Estoy creando un control de carga en javascript y luego usando element.click() para abrir el cuadro de diálogo del buscador de archivos.

de diálogo broswer

function add(type) {    
     var element = document.createElement("input"); 
     element.setAttribute("type", type); 
     element.setAttribute("value", type); 
     element.setAttribute("name", type);    
     element.setAttribute("id", "element-" + i); 
     var removebutton = document.createElement('a'); 
     var removeimage = document.createElement('img'); 
     removeimage.setAttribute("width", 15); 
     removeimage.setAttribute("height", 15); 
     removeimage.setAttribute("class", "removebutton");             
     removeimage.src = "/Content/Images/redx.png";    
     removebutton.appendChild(removeimage); 
     removebutton.setAttribute("id", "remove-" + i); 
     removebutton.setAttribute("onclick", "remove(" + i + "); return 0;"); 
     var newfile = document.getElementById("uploadhere"); 
     //newfile.appendChild(removebutton); 
     newfile.appendChild(element); 
     newfile.appendChild(removebutton); 
     element.click(); 
     i++;      
    } 

El archivo aparece como estaba previsto, pero después selecciono la presente en mi formulario de los archivos introducidos en el control de desaparecer.

Si hago clic en "navegar" obtengo el cuadro de diálogo de archivo pero el archivo se carga correctamente.

¿Cómo puedo agregar un control de carga de archivos a mi formulario y hacer que muestre el cuadro de diálogo de abrir archivos y seguir funcionando como estaba previsto.

Answer 1

Firefox es el único navegador que permite esto. Chrome, safari y opera no lo permiten, en primer lugar, mientras que IE solo te está engañando porque puede, pero no enviará el archivo seleccionado de esta manera.

Me gustaría solucionarlo eliminando el .click() en total y agregando una nueva entrada de archivo en el evento change de la entrada anterior, de esta manera no requiere 2 clics para cada archivo nuevo (agregando la entrada + diálogo de apertura)) Ejemplo http://jsfiddle.net/APstw/1/

también ver jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

Answer 2

El tipo de entrada "archivo" debe incluir el atributo:

enctype="multipart/form-data" 

cuando se especifica el método POST. Ver esto: http://www.w3.org/TR/html4/interact/forms.html#edef-FORM

También puede haber otras limitaciones en este escenario, en función de su pregunta, parece que podría estar tratando de hacer la carga en una llamada AJAX. Consulte las respuestas aquí: https://stackoverflow.com/questions/3686917/post-to-php-with-enctype-multipart-form-data

¿No está seguro de su código si está utilizando jQuery pero si ha intentado tener un formulario de entrada oculto y usando clone() para crear otro según sea necesario?

Answer 3

Según lo indicado por Ann.L, puede esperar un comportamiento extraño al intentar agregar dinámicamente un control de carga a una página.

Recuerdo que IE, en particular, fallará silenciosamente y no publicará sus datos (verá el nombre del archivo publicado en la solicitud, pero no la "matriz de bytes" correspondiente).

¿Por qué no se alterna la visibilidad del campo de carga en lugar de crearlo desde cero? De esta manera, la página "posee" el control y es probable que su función funcione. Lo único que queda por hacer es actualizar su contenedor con el archivo recién cargado.