jquery - How to upload an image file using only javascript and ajax - Stack Overflow

admin管理员组

文章数量:1426918

In form, There is a field of file

<input type="file" name="file">
<input type="button" value="upload">

I want to upload image file onto server but I can't able to upload the image. Is there any solution in only javascript? Please help me to find this answer. Thanks..!

In form, There is a field of file

<input type="file" name="file">
<input type="button" value="upload">

I want to upload image file onto server but I can't able to upload the image. Is there any solution in only javascript? Please help me to find this answer. Thanks..!

• javascript
• jquery
• ajax

Share Improve this question Follow edited Apr 24, 2015 at 16:24 HaveNoDisplayName 8,527106106 gold badges4040 silver badges5050 bronze badges asked Apr 24, 2015 at 10:22 Zoya KhanZoya Khan 8311 gold badge22 silver badges66 bronze badges 3

• I have searched many topics related to uploading image on server, but everywhere i found solution using php or angular or nodejs – Zoya Khan Commented Apr 24, 2015 at 10:26
• You can encode it as base64 and decode in server side – kosmos Commented Apr 24, 2015 at 10:39
• “but everywhere i found solution using php or angular or nodejs” – of course you will need something on the server side, that takes the uploaded image and does something with it (like permanently store it under a certain path). – C3roe Commented Apr 24, 2015 at 10:43

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

This isn't possible with JavaScript alone, you will need to use a server side language to process the actual uploading of the file.

This will do the job in Firefox, IE does not support FormData, so you should find another way

<script type="text/javascript" src="http://code.jquery./jquery-latest.min.js"></script>

<form id="data">
  <fieldset>
    <div>Asset File: <input id="image_file" name="image_file[]" type="file" /></div>
    <div><input type="submit" value="Submit"></div>
  </fieldset>
</form>


<script>
$(function() {

  $("form#data").submit(function(event){

    event.preventDefault();

    var url  = 'http://server./upload';
    var image_file = $('#image_file').get(0).files[0];

    var formData = new FormData();
    formData.append("image_file", image_file);

    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function (status) {
        // do something on success
      }
    });

    return false;

  });

});

</script>

Your web site files are stored at the server. JavaScript runs at the client-side.

The images must be stored somewhere. But the client-side JavaScript have access to the user's browser window (or tab). and user's cache. You cannot write files at the server storage using only client-side JavaScript.

The ways images are uploaded and downloaded:

Download:
You send request to the server using JavaScript (ajax for example). In this request you say: "GET http://my-site/images/cool-dog.png" This is static request that try to access images/cool-dog.png from your public folder on the server. Every server has option that allows you to determinate which folder will contain all the files for the static requests.

STATIC request is when you try to access a file with an extension (cool-dog.png)

Upload:
As we know, everybody can write client-side JavaScript to the console: Every major browser has debugging tools. And everybody can send any kind of request to your server from Postman for example.
It will be bad to accept all of there request. Somebody may want to upload 100GB file at max speed. That may affect the application and server performance or even hack the application.

You need server-side logic to determinate which file is good for your server and where this file must be stored, since the JavaScript know only about client-side storage (cookies, localStorage, sessionStorage, cache, etc...).

Upload process is:
You send request from the client-side JavaScript to the server-side. For example : POST http://my-site/uploadImage with the image data.
The server-side accepts that request. For example: Router.get('uploadImage', function() {...Server side code...}). Since http://my-site/uploadImage is dynamic path (we do not have extension) The server-side Router will wait for this kind request and if it's requested the server-side code must check the file size and extension (.png or .dll) and etc... And if the file is good for your application then you can write this file to the server location.

The different server languages and technologies has different methods for processing requests and writing files.

If you want to extend your knowledge you need to learn at least one server-side language and technology. You cannot make flexible applications only with client-side logic.

If you are familiar with JavaScript yet. You may want to learn NodeJS. This site contains great tutorials for NodeJS beginners.

PHP is also easy to learn if you can found some good tutorials.

Here is tutorial how to upload files using nodeJS
and here is another for PHP

本文标签： jqueryHow to upload an image file using only javascript and ajaxStack Overflow