html中使用上传文件
作者:程序员11 时间:2022-03-07 人气:471 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-热门文章
活跃用户












