Adding a file option to the present form field

Question

I have a feedback form in my website. Its very basic and only having a text area to put user feedback and submit. now i am planing to add one option for attaching a picture along with feedback. Adding another text field easy but i can't figure out how can i add a file into the JavaScript. Please suggest the required changes to add a file into the below script

function upload() {
  var feedback = _("feedback").value;
  var status = _("status");
  if (feedback == "") {
    status.innerHTML = "Empty";
  } else {
    status.innerHTML = 'please wait ...';
    var ajax = ajaxObj("POST", "feedback.php");
    ajax.onreadystatechange = function() {
      if (ajaxReturn(ajax) == true) {
        if (ajax.responseText != "ok") {
          status.innerHTML = ajax.responseText;
        } else {
          window.location = "thanks.php";
        }
      }
    }
    ajax.send("feedback=" + feedback);
  }
}

<form id="form1" enctype="multipart/form-data" onsubmit="return false;">
  <input id="feedback" type="text">
  <button id="submit" onclick="upload()">Submit Details</button>
  <span id="status"></span>
</form>

What does ajaxObj do here? where are the options for ajax requests being fired? are you using jquery? or Have you written the methods ajaxObject, ajaxReturn your own implementations? — NikhilWanpal, Jul 04 '15 at 06:18
Calling ajax function ajaxObj( meth, url ) { var x = new XMLHttpRequest(); x.open( meth, url, true ); x.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); return x; } function ajaxReturn(x){ if(x.readyState == 4 && x.status == 200){ return true; } } — user3586736, Jul 04 '15 at 06:31

score 0 · Answer 1 · answered Jul 04 '15 at 06:26

0

Here you are:

var x = document.createElement("input");
x.setAttribute("type", "file");
document.querySelector("#form1").appendChild(x);

Hope this help.

answered Jul 04 '15 at 06:26

hungndv

2,121
2
19
20

so i believe as per your code i need to change my script as ...... ajax.send("feedback="+feedback+"&x="+x); .... is it right ? – user3586736 Jul 04 '15 at 06:34
@user3586736: I don't know. It's up to API which your ajax call to. – hungndv Jul 04 '15 at 06:39
@user3586736: please refer for PHP AJAX here: [http://www.w3schools.com/php/php_ajax_php.asp](http://www.w3schools.com/php/php_ajax_php.asp). Hope this help. – hungndv Jul 04 '15 at 06:42

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Unless you're trying to upload the file using ajax, just submit the form to feedback.php.

<form enctype="multipart/form-data" action="feedback.php" method="post">
  <input id="image-file" type="file" />
</form>

If you want to upload the image in the background (e.g. without submitting the whole form) you'll need to use Flash since JavaScript alone can't do this.

jQuery Ajax File Upload

Ajax using file upload

jquery easy example look at first answer

edited May 23 '17 at 11:52

Community

1
1

answered Jul 04 '15 at 06:28

Amir Mohsen

853
2
9
23

but with out JavaScript i will not get the response back from php ..and can't do the other css effects after submitting – user3586736 Jul 04 '15 at 06:38

NikhilWanpal · Answer 3 · 2015-07-04T07:06:45.870

0

Okay.. so two things you will have t change:

Remove that header ('application/x-www-form-urlencoded') and add 'multipart/form-data' header instead. files can not be sent as urlencoded.
Secondly, in ajax request, instead of sending feedback as string, you need to send FormData object, which supports file upload over ajax:

var myForm = $("#form1")[0]; var formData = new FormData(myForm); ajax.send(formData);

Update: Forgot to mention: Of course the third thing you will need is to add to your form!

edited Jul 04 '15 at 07:06

answered Jul 04 '15 at 06:47

NikhilWanpal

2,960
3
23
40

@user3586736 glad I helped. Since you seem new, you should up-vote the answers that help you and mark the answer that solved your problem as 'accepted'. – NikhilWanpal Jul 04 '15 at 07:08

Adding a file option to the present form field

3 Answers3