bootstrap-fileinput报错“SyntaxError: Unexpected token < in JSON at position 0”解决方法

今天前端用 bootstrap-fileinput 做文件上传功能,后端用PHP处理,当我点击“上传”按钮的时候,会给前端返回一个 json 格式的数据,但是,返回的这个json数据总是报错,具体如下:

 

火狐浏览器报错如下:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

中文翻译

语法错误:JSON.parse:JSON数据的第1行第1列出现意外字符

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

 

谷歌浏览器报错如下:

SyntaxError: Unexpected token < in JSON at position 0

中文翻译

语法错误:位置0处的JSON中出现意外标记<

SyntaxError: Unexpected token < in JSON at position 0

 

解决方法

想要解决问题,必须要先知道原因,其实原因也很简单,我们返回的 json 数据格式不对,很明显我这里返回的肯定是 html 网页标记的格式。

 

经过我的不断测试,我才发现,我的后端代码用了 :

var_dump($_FILES);

echo '<br/>';

 

最后才用 json_encode 返回的json,当然,返回的json肯定有 < 网页标签了。

 

因此,解决方法也很简单,屏蔽或删除类似的这种代码就好了。

 

为了让大家更好的理解,我还是把我的简单示例代码给大家发一下:

前端代码:index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎来到付杰博客:bootstrap-fileinput 文件上传</title>

    <script src="/bootstrap-fileinput/jquery-3.5.1.min.js?x73259" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/bootstrap-fileinput/bootstrap-3.3.7/css/bootstrap.min.css?x73259" crossorigin="anonymous">
    <script src="/bootstrap-fileinput/bootstrap-3.3.7/js/bootstrap.min.js?x73259" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="/bootstrap-fileinput/bootstrap-fileinput/css/fileinput.min.css?x73259" crossorigin="anonymous">

    <!-- 如果你想在最初的预览中排序/重新排列需要引入sortable.min.js  它必须在fileinput.min.js之前引入 -->
    <script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/sortable.min.js?x73259" type="text/javascript"></script>
    <!-- 如果你想在HTML文件预览中净化HTML内容则要引入purify.min.js is   它必须在fileinput.min.js之前引入 -->
    <script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/purify.min.js?x73259" type="text/javascript"></script>
    <script src="/bootstrap-fileinput/bootstrap-fileinput/js/plugins/piexif.min.js?x73259" type="text/javascript"></script>

    <!-- 主要的 fileinput 插件库 -->
    <script src="/bootstrap-fileinput/bootstrap-fileinput/js/fileinput.min.js?x73259"></script>
    <!-- 可选,如果你需要像font awesome 这样的主题,就像下面的代码一样引入它 -->

    <!-- 可选,如果你需要转换语言或翻译,就包含这个库 -->
    <script src="/bootstrap-fileinput/bootstrap-fileinput/js/locales/zh.js?x73259"></script>
</head>
<body>
<div class="container my-4">
    <form enctype="multipart/form-data">
        <div class="file-loading">
            <input id="input-703" name="kartik-input-703[]" type="file" multiple>
        </div>
    <button type="submit" class="btn btn-primary">提交</button>
    <button type="reset" class="btn btn-outline-secondary">重置</button>
    </form>
</div>
<script>
    $(document).ready(function() {
        $("#input-703").fileinput({
            theme: 'fas',
            language: 'zh',
            uploadUrl: "/bootstrap-fileinput/upload.php", // 服务器端上传处理程序
            minFileCount: 1, //最小上传文件数为1
            maxFileCount: 5, //最大上传文件数为5
            multiple:true //异步上传
        })
    });
</script>
</body>
</html>

 

后端代码:upload.php

<?php
//header('Content-Type:application/json; charset=utf-8');
// ...
// 处理ajax上传并返回JSON响应的服务器代码。
// 你的服务器方法必须返回一个包含`initialPreview`、`initialPreviewConfig`和`append`的JSON对象。
// 一个PHP服务器代码示例如下:
// ...
//var_dump($_FILES);
//var_dump($_GET);
//var_dump($_POST);
if ($_FILES["kartik-input-703"]["name"]) {
$name=$_FILES["kartik-input-703"]["name"][0];
    $target1 = time().$name;
    $target = "./".$target1;
   // echo $target;
   $file =  move_uploaded_file($_FILES['kartik-input-703']['tmp_name'][0], $target);
  // echo $imagurl;
    // echo '<br/>';
    if ($file){
        $key = $target1;
        $url = 'http://127.0.0.1/bootstrap-fileinput/delete.php'; //你删除这个文件的服务器图片方法URL
        $strjson = json_encode([
            "initialPreview" =>[
                "http://127.0.0.1/bootstrap-fileinput/$target1"
            ],
            "initialPreviewConfig" => [
                ['caption' => "{$key}", 'size' => 627392, 'width' => '120px', 'url' => $url, 'key' => $key],
                ],
            "append" => true // 是否把这些配置加入`initialPreview`。
                    // 如果设置为`false`,它会重载初始预览。
                    // 如果设置为`true`,它会加入初始预览之中。
                    // 如果这个属性没有被设置或者没有传出,它会默认为`true`。
            ],320);
        echo  $strjson;
    }else {
        echo json_encode(['error'=>'上传失败!']);
    }
}

 

最终效果:

选择图片并点击上传时,如下图:

bootstrap-fileinput上传

 

上传成功后效果如下图:

bootstrap-fileinput 上传成功

 

总结:

此 bootstrap-fileinput 图片上传的示例代码还不是很完整,像上图所示,上传成功后应该前端应该把缩略图显示出来的,还有所谓的前端点击删除按钮,图片也要被删除,后端还缺少这个功能,这里还没有做,由于时间有限,暂时先这样吧!

 

猜你还需要:

PHP函数:json_encode中文unicode编码和斜杠转义 解决方法

    A+
发布日期:2020年06月20日 23:56:42  所属分类:Bootstrap
最后更新时间:2020-06-21 00:04:46
评分: (1 票;平均数5.00 ;最高评分 5 ;用户总数1;总得分 5;百分比100.00)
付杰
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
刷流量 刷人气 刷点击 刷收藏 刷APP关键词
  • ¥ 1.0元
  • 市场价:9.9元
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
免费SSL证书 HTTPS申请 安装 配置 支持通配符*
  • ¥ 199.9元
  • 市场价:20000元
服务器管理面板/主机控制面板“安装”服务
服务器管理面板/主机控制面板“安装”服务
  • ¥ 9.9元
  • 市场价:49.9元
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
PHP运行环境 wamp lamp lnmp 安装 配置 搭建
  • ¥ 9.9元
  • 市场价:49.9元

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: