Question

如何使用Javascript从input元素发送图像？

这是我的形象元素：

<input type="file" name="imagefile" onChange="fileThumbnailHeader(this.files);" accept="image/*" id="header-img-upload" class="header-img-upload" />

这是我的功能，我发布其他文本字段：

function registerDetails(){

    var register_location = document.getElementById('register_location').value;
    var register_country = document.getElementById('register_country').value;
    var register_language = document.getElementById('register_language').value;
    var register_interests = document.getElementById('register_interests').value;
    var register_homepage = document.getElementById('register_homepage').value;
    var register_music = document.getElementById('register_music').value;
    var register_films = document.getElementById('register_films').value;
    var register_books = document.getElementById('register_books').value;
    var register_relationship = document.getElementById('register_relationship').value;
    var register_age = document.getElementById('register_age').value;
    var register_school = document.getElementById('register_school').value;
    var register_phone = document.getElementById('register_phone').value;
    var register_job = document.getElementById('register_job').value;    
    $.post( versionMode + "register_step_one_update.php",{city : register_location, country : register_country, language : register_language, tags : register_interests, website : register_homepage, music : register_music, movies : register_films, books : register_books, relation : register_relationship, age : register_age, school : register_school, phone : register_phone, job : register_job}, function( data ) {
        alert(data);

    });

}

如何用它发送图像？

Answer 1

<script>
$("form[name='uploader']").submit(function(e) {
  // var file = $("#userfile")[0].files[0]; //try this too
  // var fileName = file.name;
  $.ajax({
    url :"url_for_the_php_page",
    type:"POST",
    data: new FormData(this), // Data sent to server, a set of key/value pairs (i.e. form fields and values)
	contentType: false,       // The content type used when sending data to the server.
	cache: false,             // To unable request pages to be cached
	processData:false,        // To send DOMDocument or non processed data file it is set to false
    success:function(msg){
    	// alert(msg);
    }
  });
  return false;
});  
</script>

<html>
  <form id="uploader" name="uploader" accept-charset="utf-8" enctype="multipart/form-data"><!-- no action include in the form open -->
  	<input type="file" name="userfile"  id="userfile" class="file" value="" > <!-- this is the file upload field -->
  	<input type="text" name="register_location"  id="register_location" class="" value="" >
  	<input id= "submit_button" name = "submit_button" type="submit" value="Upload">
  </form>
<html>

<?php
// in your php page you can access those fields as follows
   $userfile = $_POST['userfile'];
   $register_location = $_POST['register_location'];
?>

如何从输入元素发送带有js的图像？

1 个答案: