使用ajax上传文件

最新推荐文章于 2024-05-09 14:38:11 发布

世林_不调皮了

最新推荐文章于 2024-05-09 14:38:11 发布

阅读量115

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_55891422/article/details/129887607

版权

<div style="text-align: center;">
    <h1>hello world!</h1>
        <div>姓名:<?= $detail['name']?></div>
        <div>手机:<?= $detail['phone']?></div>
    </div>
<html>
<head>
    <meta charset="utf-8" />
    <title>上传文件</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <script src="/js/jquery.js"></script>
    <script>
        $(function () {
            $("#upload").click(function () {
                var formData = new FormData();
                formData.append("pic", document.getElementById("pic").files[0]);//第一参数对应 up.php $_FILES['pic']
                $.ajax({
                    url: '<?= Yii::$app->urlManager->createUrl('upload/upload')?>',//上传地址
                    type: 'post',
                    data: formData, //可以异步上传一个二进制文件.
                    async: false,
                    cache: false,
                    contentType: false, //必须false才会自动加上正确的Content-Type
                    processData: false, //必须false才会避开jQuery对 formdata 的默认处理
                    success: function (d) {
                        console.log(d);
                        var ret = /upload/;//正则,用于上传成功后路径包含此名称
                        if (ret.test(d)) {
                            $('#showImg').html('<img  src="' + d + '" width="100">');
                            $('#filename').val(d);//路径写到表单元素中
                        } else {
                            alert(d);
                        }
                    },
                    error: function () {
                        alert('上传失败');
                    }
                });
            });
        });
    </script>
    <style>
        form{ width: 600px; margin: 50px auto}
    </style>
</head>
<body>
<form id= "uploadForm" method="post" action="<?= Yii::$app->urlManager->createUrl('upload/save')?>">
    <p>标题： <input type="text" name="title" /></p>
    <p>上传文件： <input type="file" id="pic"/> <input type="button" value="上传" id="upload" />  </p>
    <p>上传后路径： <input type="text" name="filename" id="filename"  readonly/></p>
    <p id="showImg"></p>
    <p><input type="submit" value="保存"></p>
</form>
</body>
</html>