jQuery / ajax上传图片并保存到文件夹

更新下面的代码

我找到了一些能够上传图像并显示其缩略图的代码。 但是，我想将图像保存到特定文件夹中。

我可以用什么jQuery代码或ajax代码将原始图像保存到我选择的文件夹中？

这是现场演示： http ： //jsfiddle.net/dn9Sr/2/

这是完整的代码：

    .input-file-row-1:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .input-file-row-1{ display: inline-block; margin-top: 25px; position: relative; } https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#preview_image { display: none; width: 90px; height: 90px; margin: 2px 0px 0px 5px; border-radius: 10px; } .upload-file-container { position: relative; width: 100px; height: 137px; overflow: hidden; background: url(http://i.imgur.com/AeUEdJb.png) top center no-repeat; float: left; margin-left: 23px; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-text > span{ border-bottom: 1px solid https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#719d2b; cursor: pointer; } .one_opacity_0 { opacity: 0; height: 0; width: 1px; float: left; }   $( document ).ready(function() { function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr('src', e.target.result).show(); }; reader.readAsDataURL(input.files[0]); } } $("https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#patient_pic").live("change",function(){ readURL(this, "https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#preview_image") }); });    
 
 
 
  
 
  
  Add Photo  
 
 
 
 
   

更新：我认为我走在正确的轨道上。 我很接近，但我不知道从jQuery发送什么数据。 我添加了一个php scrit，它的回调成功，但我没有发送正确的var。 我想如果我发送正确的val我就可以得到它。 码：

  $( document ).ready(function() { function readURL(input, target) { if (input.files && input.files[0]) { var reader = new FileReader(); var image_target = $(target); reader.onload = function (e) { image_target.attr('src', e.target.result).show(); $.ajax({ type:'POST', url: 'theUpload.php', data: input.files[0], success:function(data){ console.log("success"); console.log(data); alert(data); }, error: function(data){ console.log("error"); console.log(data); } }); }; reader.readAsDataURL(input.files[0]); } } $("https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#patient_pic").live("change",function(){ readURL(this, "https://stackoverflow.com/questions/21398731/jquery-ajax-upload-image-and-save-to-folder/#preview_image") }); });  

Answer 1

试试这个。

脚本：

 function uploadFile(){ var input = document.getElementById("file"); file = input.files[0]; if(file != undefined){ formData= new FormData(); if(!!file.type.match(/image.*/)){ formData.append("image", file); $.ajax({ url: "upload.php", type: "POST", data: formData, processData: false, contentType: false, success: function(data){ alert('success'); } }); }else{ alert('Not a valid image!'); } }else{ alert('Input something!'); } } 

HTML：

       Upload   

upload.php的：

Answer 2

您需要一种服务器端语言来将上载的图像存储到指定的文件夹。 PHP就是其中之一，所以我强烈建议你去看看它。

AJAX仅用于在不刷新页面的情况下执行服务器端调用。

Answer 3

John的答案很好但是file = input.files [0]对我不起作用

 file = input[0].files[0] 

作品。