ddddd

html中使用上传文件

作者:程序员11 时间:2022-03-07 人气:445 QQ交流群\邮箱:1003265987@qq.com
html中使用上传文件,只需在一个页面就可以实现
要展示的内容

html 代码

<div><input type="file" id="files" name="file" multiple></div>
<input id="upload" data-Old="<?=$Old?>" type="button" value="开始上传" style="cursor: pointer"/>
<script>
                /*1*/
                var elem = document.getElementById('files');
                elem.onchange = function (event) {
                    var files = event.target.files;
                    for (var i = 0; i < files.length; i++) {
                        // 文件类型为 image 并且文件大小小于 200kb
                        if(files[i].type.indexOf('image/') !== -1 && files[i].size < 204800){
                            console.log(files[i].name);
                        }
                        console.log(files[i]["tmp_name"]);
                        var formData = new FormData();
                        formData.append("file",files);
                    }
                }
                $("#upload").on('click',function () {
                    var file = document.getElementById("files").files[0];
                    var  form = new FormData();
                    form.append("file", file);
                    var req = new XMLHttpRequest();
                    req.onreadystatechange = function(res) {
                        if (req.readyState === 4 && req.status === 200) {
                            // 回调函数
                            var result = JSON.parse(res.target.response);
                            console.log(result);
                            $("input[name='FilePath']").val(result.filepath);
                            var FilePath = result.filepath;
                            var Old = $("#upload").data('old');
                            $.post('?', 'do_action=orders.orders_mod_alertShop'
                                + '&Old='+Old
                                + '&FilePath='+FilePath, function(data){
                            }, 'json');
                        }
                    }
                    req.open("post", '/upload.php', true);
                    req.send(form);
                });
            </script>

上传接口

<?php
/**
 * Created by PhpStorm.
 * User: 李朋飞
 * Date: 2022/2/10
 * Time: 13:22
 */
if(isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $uploadDir = 'uploadfile'.DIRECTORY_SEPARATOR;
    $dir = dirname(__FILE__).DIRECTORY_SEPARATOR.$uploadDir;
    file_exists($dir) || (mkdir($dir,0777,true) && chmod($dir,0777));
    if(!is_array($file["name"])) {
        $fileName = $file["name"];
        $e = explode('.', $fileName);
        $file_suffix = '.' . array_pop($e);
        $file_suffix = strtolower($file_suffix);
        $_new_file_name = md5(uniqid(mt_rand(), true));  //生成一个唯一的 ID
        $fileName = $_new_file_name . $file_suffix;  // $time.$_random 避免大并发重复
        $filepath = $dir.$fileName;
        move_uploaded_file($file["tmp_name"], $filepath);
    }
    $file_new_path = $uploadDir.$fileName;
    $file_new_path = str_replace('\','/',$file_new_path);
    echo  json_encode(array('Code' => '1', 'filepath' => '/'.$file_new_path));
}

链接:https://www.jianshu.com/p/d7d4ecbbad61

https://www.jb51.net/html5/563640.html

https://blog.csdn.net/liwenfei123/article/details/94453335





温馨提示:

欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。

html中使用上传文件---相关文章


评论区

ddddd

程序员-学习的网站-想学习编程的码农可以进来看看

首页

视频教程

购物车

我的订单