使用jQuery上传图片

Question

I have this Html code and I try to save my record in DB

<div> 
     <p> Item Name : 
      <input type = 'text' id = 'ItemName' />  
     </p>
     <p> select Image : 
      <input type = 'file' id = 'Image' />
      </p>
     <input type='button' id ='btnSaveItem'>Save </input> 

 </div>

How can I upload a picture and save it using Jquery and PHP? I have not been able to find a Jquery method to upload an image, but I need to do without a page refreshing.

Answer 1

Normally you just can't upload images via Ajax, you will need workarounds.

I use this jquery plugin, it's easy to use and you don't need to code almost nothing: http://malsup.com/jquery/form/

Answer 2

Not sure if it's possible, but seems to me like every other jquery post-without-refresh :) Put names in the desired fields, not only id's. Then post to a specific .php page the desired data via jquery, and make your upload logic there. The correspond will be between your jquery and .php page, so no refresh will be done. The text field you can get with the $_POST superarray in php, and the file with $_FILE.

Answer 3

可以使用uploadify进行上传而无需刷新，请参阅http://www.uploadify.com/demos/

Answer 4

I've recently added an answer for a similar question. Please take a look at this:

Upload image using jquery

It uses $.ajax to upload a file.