verot.net

Yes, you can use jQuery, although it is a bit more complicated. You will find all the needed information on the first links hereReply

thank you very much Colin for the reply. i'll try. :DReply

i tried to upload via jQuery. but it didn't work

my html code

<form id="fileUp" enctype="multipart/form-data" method="post" action="#">
  <input type="file" size="32" id="fileInput" name="image_field" value="">
  <input type="button" >
</form>

my js code

function upload(){
  var filename = $('input[type=file]').val().split('\\').pop();
  //alert(filename);
  var path = $('input[type=file]').val();
  $.ajax({
    headers: { "Cache-Control": "no-cache","X-Requested-With":"XMLHttpRequest","X-File-Name": filename },
    url:'testAjax.php',
    data:{imageName:'image_field',path:path},
    type:'POST',
    success: function(data){
      $('#error').html(data);
    },
  });
}

my php code

require_once('../include/upload.php');
if (isset($_SERVER['HTTP_X_FILE_NAME']) && isset($_SERVER['CONTENT_LENGTH'])) {
  $handle = new Upload('php:'.$_SERVER['HTTP_X_FILE_NAME']);
  if ($handle->uploaded) {
    echo "uploaded";    
  } else{
    echo 'error : ' . $handle->error;
  }
}

output > error : Can't read image source. Not an image?.Reply

You should check if you have something meaningful in $_SERVER, $_REQUEST, etc... Also, check the log produced by the class.

I don't have time to try using jQuery for the upload, but your example seems quite too simple compared to the code samples given on these links.

I would suggest not using jQuery for the upload case (as in this case, jQuery complicates the code), or else trying out the code samples providing in the link above.Reply

you have mentioned " xhr.send(f)" in your ajax request. "f" means file object.?

i'm passing 'file name'. it can be passed through header. ( X-File-Name )

can you explain "xhr.send(f)" on your js script? why you pass 'f'?Reply

I am not too sure which f you are talking about.

The basic JS code for the XHR upload is:

// xhr example
var xhr_file = null;
document.getElementById("xhr_field").onchange = function () {
  xhr_file = this.files[0];
  xhr_parse(xhr_file, "xhr_status");
}
document.getElementById("xhr_upload").onclick = function (e) {
  e.preventDefault();
  xhr_send(xhr_file, "xhr_result");
}

As I said before, if you want to use jQuery, it is more complicated, as you need access the XHR object, which jQuery doesn't publicly allow.

Again, please check the 5 top results here, these links explain how to make it work with a jQuery form, and provide code samples, as well as interesting discussions about different jQuery versions and browser compatibility.Reply

@Colin,

Happy to say this... i could upload an image asynchronusly without using XMLHttpRequest.

use this amazing plugin. http://malsup.github.io/jquery.form.js

example:

//reservation approval count
$('#formAddBanner').ajaxForm({
  url:'upload.php',
  data:{addBanner:1},
  type:'POST',
  success:    function(data) { 
    alert(data); 
  }
});

Again thank you very much for the code.Reply