/    Sign up×
Community /Pin to ProfileBookmark

ajax post form and file input

Copy linkTweet thisAlerts:
Jan 18.2022

Dear all,
I am trying to post data information from form to server, from last time post only data is work but now I would like to post file also.
Could you please kindly help me to make it work?

“`//check file choose waitPOattach
 var files = document.getElementById(“waitPOattach”).files;
var file = files[0];

$.ajax({
url: “action.php”,
method: “POST”,
data: { function : ‘updateprojectstatus_ID’,
samplingdate : document.getElementById(‘SamplingDate’).value,
collectsample : collectsample,
waitPOattach : file,
collectsamplecomment : document.getElementById(‘collectsamplecomment’).value,
remark : document.getElementById(‘remark2’).value
},
“`

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertJan 19.2022 — > @Nitiphone#1641669 but now I would like to post file also

How big (KB or MB ) are these files? And how many?
Copy linkTweet thisAlerts:
@NitiphoneauthorJan 19.2022 — @sibert#1641680 only one file,

the file is a attached file lower than 1MB
Copy linkTweet thisAlerts:
@sibertJan 19.2022 — > @Nitiphone#1641681 file lower than 1MB

Have you considered upload it and just store the path in the database?
Copy linkTweet thisAlerts:
@SempervivumJan 19.2022 — @Nitiphone#1641669

I read this:

https://stackoverflow.com/questions/10899384/uploading-both-data-and-files-in-one-form-using-ajax

and did the following modifications:
  • - used a FormData object instead of a plain object

  • - added these parameters to the $.ajax call:
    ``<i>
    </i> contentType: false,
    processData: false,<i>
    </i>    `</CODE></LI></LIST>

    and uploading worked fine.<br/>
    PHP:
    <CODE>    `<i>
    </i>ini_set('display_errors', '1');
    error_reporting(E_ALL);
    var_dump($_POST);

    // $_FILES contains information about the file having been uploaded:
    var_dump($_FILES);
    // 'waitPOattach' is the key in the formdata object:
    if ($_FILES['waitPOattach']['error'] != 0) {
    echo 'Error: ' . $_FILES['waitPOattach']['error'] . '&lt;br&gt;';
    } else {
    echo 'Datei ' . $_FILES['waitPOattach']['name'] . ' was uploaded successfully&lt;br&gt;';
    move_uploaded_file($_FILES['waitPOattach']['tmp_name'], 'uploads/' . $_FILES['waitPOattach']['name']);
    }<i>
    </i>    ``
    My testfile:

    https://pastebin.com/cKE7HMh4
    • Copy linkTweet thisAlerts:
    @NitiphoneauthorJan 19.2022 — @Sempervivum#1641684 Your solution is work for upload file but i has a problem about moving file from temp to my path

    Could you guide me how to make it work?

    I found the new file on temp but it can't move to my path
    ``<i>
    </i> echo $_FILES['waitPOattach']['tmp_name'];
    // move_uploaded_file($_FILES['waitPOattach']['tmp_name'], '/attachedfile/' . $_FILES['waitPOattach']['name']);
    copy($_FILES['waitPOattach']['tmp_name'], '/attachedfile/ABC.png');<i>
    </i>    ``
    Copy linkTweet thisAlerts:
    @SempervivumJan 19.2022 — Does the active version (last line, copy) work?

    As the path is starting with a slash the path has to be absolute from the root of your file system.

    I recommend using relative paths starting from the directory where the PHP script resides, without a leading slash.
    Copy linkTweet thisAlerts:
    @NitiphoneauthorJan 19.2022 — Oh it's work!!! because MAC's permission
    Copy linkTweet thisAlerts:
    @LloydBJan 20.2022 — Nice
    ×

    Success!

    Help @Nitiphone spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.6,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...