PHP+HTML5+ajax 图片上传和图片预览

最新推荐文章于 2021-03-11 18:08:18 发布

陆康永

最新推荐文章于 2021-03-11 18:08:18 发布

阅读量5.9k

点赞数 2

分类专栏： php

本文链接：https://blog.csdn.net/xiaomogg/article/details/50573738

版权

php 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

之前我用php来上传图片链接

，通过submit来提交图片，我一直以为图片是不能用ajax上传的，群友告诉我可以用base64来上传图片，我搞不懂，

今天碰巧找到灵位一种上传图片的方式，

下面直接show代码

html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<style>
    #result div{
        display:inline-block;
    }
</style>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title> FormData Demo </title>


</head>
<body>
<form name="form1" id="form1">//不需要写文档类型
    <p>name:<input type="text" name="name" ></p>
    <p>gender:<input type="radio" name="gender" value="1">male <input type="radio" name="gender" value="2">female</p>   <!--多张图片上传其实就是提交一个数组--->
    <p>photo:<input type="file" name="photo[]"><span></span></p>
    <p>photo:<input type="file" name="photo[]"><span></span></p>
    <p>photo:<input type="file" name="photo[]"><span></span></p>
    <p><input type="button" name="b1" value="submit"  id="submit"></p>
</form>
 <div id="result"></div>
<script>
    var assetsUrl="../assets/lib/";
</script>
<script src="../assets/lib/requirejs/require.js" ></script>
<script src="../assets/lib/require-config.js"></script>
<!--这里放js代码-->
</body>
</html>

javascript：

<script type="text/javascript">
    require(["jquery"],function($){
        //上传前预览
        $("input[type=file]").change(function(){
            var objUrl = getObjectURL(this.files[0]) ;
            console.log("objUrl = "+objUrl) ;
            if (objUrl) {
                var img="<img src="+objUrl+" width='40px' height='40px' style='border:1px solid #ccc;'/>";
                $(this).next("span").empty().html(img);
            }
        });

    //建立一個可存取到該file的url，做兼容
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
        //上传按钮
        $("#submit").click(function(){
            fsubmit();
        });

        function fsubmit(){
            var data = new FormData($('#form1')[0]);
            $.ajax({
                url: 'php/upload.php',
                type: 'POST',
                data: data,
                dataType: 'JSON',
                cache: false,
                processData: false,
                contentType: false
            }).done(function(ret){
                for(var i=0;i<ret.length;i++ ){
                    if (ret[i]['isSuccess']) {
                        var result = '';
                        result += '<div><p> name=' + ret[i]['name'] + '</p>';
                        result += '<p>gender=' + ret[i]['gender'] + '</p>';
                        result += '<img src="' + ret[i]['photo'] + '" width="100"></div>';
                        $('#result').append(result);

                    }
                }
            });
            return false;
        }
    });

</script>

PHP:

<?php
$name = isset($_POST['name'])? $_POST['name'] : '';
$gender = isset($_POST['gender'])? $_POST['gender'] : '';
//echo json_encode(array("长度",count($_FILES['photo']['name'])));
//$filename = time().substr($_FILES['photo']['name'], strrpos($_FILES['photo']['name'],'.'));
$uploads_dir = '../uploads/img/';
$dir_retrun='uploads/img/';
$tmp = array();

for($i=0;$i<count($_FILES['photo']['name']);$i++) { //foreach 循环处理多个文件上传
    $filename = time().substr($_FILES['photo']['name'][$i], strrpos($_FILES['photo']['name'][$i],'.'));
    if(move_uploaded_file($_FILES['photo']['tmp_name'][$i], "$uploads_dir$filename")){
        $response = array();
        $response['isSuccess'] = true;
        $response['name'] = $name;
        $response['gender'] = $gender;
        $response['photo'] = "$dir_retrun$filename";
        array_push($tmp,$response);
    }else{
        $response['isSuccess'] = false;
    }
}
//for($i=0;$i<$tmp.length;$i++){
//    if($tmp[$i]['isSuccess']==false){
//        $tmp['isSuccess']=false;
//        break;
//    }
//}
echo json_encode($tmp);
?>