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
温馨提示:
欢迎阅读本文章,觉得有用就多来支持一下,没有能帮到您,还有很多文章,希望有一天能帮到您。
- 上一篇:kkfileview在线文档预览
- 下一篇:网页预览pdf
HTML5-热门文章
活跃用户












