记录：html 图片预览 php图片上传

最新推荐文章于 2022-11-18 07:18:31 发布

qq_39968438

最新推荐文章于 2022-11-18 07:18:31 发布

阅读量1.3k

点赞数

分类专栏： php html web

web 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

php

2 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

图片预览

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<script type="text/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;
        };
        reader.readAsDataURL(file);
    }
</script>
</head>
<body>
    <img id="preview" />
    <br />
    <input type="file" name="file" οnchange="imgPreview(this)" />
</body>
</html>

图片上传：

php:

 $uploadPath = 'uploads/';

// 获取提交的图片数据
$file = $_FILES['file'];

// 获取图片回调路径
//$callbackUrl = $_POST['callbackUrl'];

if($file['error'] > 0)
{
    echo "<script language=javascript>alert('图片上传失败！请重新上传!');history.back();</script>";
        exit();
}
else
{

   // chmod($uploadPath, 0666);

    if(file_exists($uploadPath.$file['name'])){
       $msg = $file['name'] . "文件已经存在！";
       $pic = "http://localhost/".$uploadPath.$file['name'];  //https://servicenetwork
    }
    else
    {
        if(move_uploaded_file($file['tmp_name'], $uploadPath.$file['name']))
        {

          $img_url = "http://localhost/".$uploadPath.$file['name'];
          //$img_url = urlencode($img_url);
          $pic = $img_url;
          //$url = $callbackUrl."?img_url={$img_url}";

          // 跳转
          //header("location:{$url}");
          //exit();

        }
        else
        {
         echo "<script language=javascript>alert('图片上传失败！请重新上传!');history.back();</script>";
        exit();

        }

    }}

或者js:

function upload() {
        var xhr = new XMLHttpRequest();
        var progress = document.getElementById("progress")
        progress.style.display = "block";

        xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                var percentage = Math.round((e.loaded * 100) / e.total);
                progress.value = percentage;
            }
        }, false);

        xhr.upload.addEventListener("load", function(e){
              console.log("上传完毕...")
          }, false);

        xhr.open("POST", "upload");
        xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText); // handle response.
                progress.style.display = "none";
                progress.value = 0;
            }
        };
        var file = document.getElementById("imgFile");
        var fd = new FormData();
        fd.append(file.files[0].name, file.files[0]);
        xhr.send(fd);
    }

qq_39968438

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
记录：html 图片预览 php图片上传

图片预览html:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;图片上传预览&lt;/title&gt;&lt;script type="text/javascript"&gt; function imgPrevie
复制链接

扫一扫