ajax文件夹,的jQuery/AJAX上传图像并保存到文件夹

这段代码展示了如何利用jQuery和Ajax技术,在用户选择图片后,将图片从输入字段上传并保存到预设的文件夹。通过`readURL`函数读取文件,然后使用POST请求将文件数据发送到PHP脚本进行处理。
摘要由CSDN通过智能技术生成

我发现一些代码,能够上载的图像,并显示其缩略图。但是,我想将图像保存到特定的文件夹。

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

下面是完整的代码:

.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;

}

#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: #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 #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]);

}

}

$("#patient_pic").live("change",function(){

readURL(this, "#preview_image")

});

});

Add Photo

UPDATE:我觉得我是在正确的轨道上。我很接近,但我不知道要从jQuery发送什么数据。我添加了一个PHP scrit,并将它作为成功回调,但我没有发送正确的var。我想如果我只是发出正确的价值观,我可以得到它。 CODE:

$(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]);

}

}

$("#patient_pic").live("change",function(){

readURL(this, "#preview_image")

});

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值