最新公告
  • 欢迎加入中国站长资源网团队,精品资源持续增加!立即加入我们
  • jQuery+PHP实现简单的图片上传功能

    图片上传思路:通过AJAX实现图片上传,然后把PHP返回的图片地址,加入隐藏字段中,最后通过表单提交给后台PHP,代码如下

    HTML代码 zimg.html文件:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义上传图片</title>
    </head>
    <body>
    <form action="a.php?action=2" method="post">
    <span>
    上传图片
    </span> 
    <span>
    <input type="file" id="img_url" name="img_url" accept=".jpg, .gif, .jpeg, .bmp, .png"/>
    <a onclick="UpLoadImg()">上传</a>
    <input type="hidden" id="url_data" name="url_data"/>
    </span>
    <br>
    <span>
    <input type="submit" value="提交">
    </span>
    </form>
    </body>
    <!-- 引入jq -->
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
    function UpLoadImg(){
    //获取上传文件
    var formData = new FormData();
    formData.append('img_url', $('#img_url')[0].files[0]);
    console.log(formData)
    //提交后台处理
    $.ajax({
    url: 'a.php?action=1',
    type: 'POST',
    cache: false,
    data: formData,
    dataType: "JSON",
    processData: false,
    contentType: false
    }).done(function(res) {
    console.log(res.url);
    if(res.status == 1){
    //赋值给字段
    $('#url_data').val(res.url);
    alert(res.msg)
    }else{
    alert(res.msg)
    }
    }).fail(function(res) {
    });
    }
    </script>
    </html>

    后台PHP代码 a.php:

    <?php
    if($_GET['action'] == 1){//上传图片接口
    $img = $_FILES['img_url'];
    //获取上图片后缀
    $type = strstr($img['name'], '.');
    $rand = rand(1000, 9999);
    //命名图片名称
    $pics = date("YmdHis") . $rand . $type; 
    //上传路径
    $pic_path = "img/". $pics;
    //移动到指定目录,上传图片
    $res = move_uploaded_file($img['tmp_name'], $pic_path);
    if($res){
    echo json_encode(['status' => 1, 'msg' => '上传成功','url' => $pic_path]);exit;
    }else{
    echo json_encode(['status' => 0, 'msg' => '上传失败']);exit;
    }
    }elseif($_GET['action'] == 2){//提交文件表单
    echo '<pre>';
    var_dump($_POST);
    }

    如果遇到资源下载失效,请复制当前文章链接类型客服处理!
    中国站长资源网 » jQuery+PHP实现简单的图片上传功能

    常见问题FAQ

    【点击查看】免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    【点击查看】提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    【点击查看】开通终身至尊下载源码 “不完整” 或 “不能用” 怎么办?
    非常抱歉,你有权利告诉本站,但是本站有选择处理或者不处理的权力,如无法接受请不要开通本站会员。
    【点击查看】开通终身会员能下载全站资源码?
    可以100%下载全站源码资源的,除部分失效资源,失效的可以联系客服尝试恢复。

    发表评论