php+ajax文件上传

本文介绍了一种使用HTML5、CSS和JavaScript实现的图片预览功能,并通过Ajax将图片上传到服务器,最后利用PHP处理上传的文件并返回路径。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

/**
* css代码
*/
.file-box {
    position: relative;
    display: inline-block;
}
.file-box img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: -30px;
    left: 0;
    display: inline-block;
    border: none;
}
.file-box .txt,.file-box .file {
    width: 70px;
    height: 36px;
    position: absolute;
    top: -20px;
    left: 100px;
    text-align: center;
}
/**
* HTML5代码
*/
<input type="file" id = "input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" "imgPreview(this)">
<img id="preview" />
/**
* JavaScript代码
*/
function imgPreview(fileDom) {
    //判断是否支持FileReader
    if(window.FileReader) {
        var reader = new FileReader();
    } else {
        alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
    }
    //获取文件
    var file = fileDom.files[0];
    var imageType = /^image\//;
    //是否是图片
    if(!imageType.test(file.type)) {
        alert("请选择图片!");
        return;
    }
    //读取完成
    reader.onload = function(e) {
        //获取图片dom
        var img = document.getElementById("preview");
        //图片路径设置为读取的图片
        img.src = e.target.result;
        var formData = new FormData(); 
        formData.append('file', $("#input_file")[0].files[0]);
        $.ajax({
            url:url,
            type: 'POST',
            cache: false, //上传文件不需要缓存
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            success: function (data){
                var user_img = data.path;
                var url = url;
                $.get(url,{u_pic1:user_img},function(msg){
                    if(msg.code == 200)
                    {
                        //alert("路径写入数据库成功");
                    }
                })
            }
        })
    };
	reader.readAsDataURL(file); 
}
/**
* PHP代码
*/
public function uploads()
{
    $file = request()->file('file');
    $info = $file->move( './uploads/');
    $path = '/uploads/'.str_replace('\\', '/', $info->getSaveName());
    if($info){
        return json(['path'=>$path]);
    }else{
        return json(['error'=>$file->getError()]);
    }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值