网站建设项目模板,深圳宝安区西乡街道,logo设计在线生成 免费,页面设计步骤摘要
很多场景下需要选择多张图片上传#xff0c;或者是批量上传以提高效率#xff0c;多图上传的需求自然就比较多了#xff0c;本文使用最简单的XMLHttpRequest异步上传图片。
界面 上传示例 代码
index.html
!DOCTYPE html
htmlheadtitl…摘要
很多场景下需要选择多张图片上传或者是批量上传以提高效率多图上传的需求自然就比较多了本文使用最简单的XMLHttpRequest异步上传图片。
界面 上传示例 代码
index.html
!DOCTYPE html
htmlheadtitle多图上传/titlemeta charsetutf-8style#fileInput{width: 500px;height: 45px;margin: 50px auto 0;background: #eee;display: block;padding: 20px 20px;border-radius: 20px;}#previewContainer{width: 500px;margin: 10px auto;background: #eee;padding: 20px 20px;display: none;}.preview-image {max-width: 200px;max-height: 200px;margin-bottom: 10px;}/style/headbody!--选择文件--input typefile idfileInput acceptimage/* multiplediv idpreviewContainer/divscriptconst fileInput document.getElementById(fileInput);const previewContainer document.getElementById(previewContainer);// 监听选择文件fileInput.addEventListener(change, handleFileSelect);function handleFileSelect(event) {const files event.target.files;for (let i 0; i files.length; i) {const file files[i];const reader new FileReader();reader.onload function(event) {const image document.createElement(img);image.className preview-image;image.src event.target.result;previewContainer.appendChild(image);// 将文件上传至服务器uploadImage(file);}reader.readAsDataURL(file);}}// 将文件上传至服务器function uploadImage(file) {const xhr new XMLHttpRequest();const formData new FormData();// 将文件添加到formData对象formData.append(image, file);// 设置XHR请求的处理函数xhr.onreadystatechange function() {if (xhr.readyState XMLHttpRequest.DONE) {if (xhr.status 200) {console.log(上传成功);// 显示图片预览区域document.querySelector(#previewContainer).setAttribute(style, display:block);// 打印JSONconsole.log(JSON.parse(xhr.response))} else {console.log(上传失败);}}}// 发送POST请求到服务器xhr.open(POST, upload.php, true);xhr.send(formData);}/script/body
/htmlupload.php 请建立一个upload文件夹以存放上传的文件
?php// 编码header(Content-type:application/json);// 检查是否有文件上传if (isset($_FILES[image])) {// 获取上传的文件信息$file $_FILES[image];// 获取文件名$fileName $file[name];// 获取文件的临时路径$tmpFilePath $file[tmp_name];// 指定保存目录$uploadDir upload/;// 验证是否为图片文件if ((($_FILES[image][type] image/gif)|| ($_FILES[image][type] image/jpeg)|| ($_FILES[image][type] image/jpg)|| ($_FILES[image][type] image/pjpeg)|| ($_FILES[image][type] image/x-png)|| ($_FILES[image][type] image/png)) ($_FILES[image][size] 10485760)){// 生成唯一的文件名$uniqueFileName uniqid() . _ . $fileName;// 拼接保存路径$uploadPath $uploadDir . $uniqueFileName;// 获取HTTP协议function get_http_type(){$http_type ((isset($_SERVER[HTTPS]) $_SERVER[HTTPS] on) || (isset($_SERVER[HTTP_X_FORWARDED_PROTO]) $_SERVER[HTTP_X_FORWARDED_PROTO] https)) ? https:// : http://;return $http_type;}// 将临时文件移动到目标路径if (move_uploaded_file($tmpFilePath, $uploadPath)) {// 上传成功// 可以在此处进行进一步处理比如生成缩略图、添加水印等$result array(code 200,msg 上传成功,url get_http_type().dirname($_SERVER[HTTP_HOST].$_SERVER[PHP_SELF])./.$uploadPath);} else {// 上传失败$result array(code 202,msg 文件上传失败);}}else{// 不合规的文件$result array(code 202,msg 不合规的文件);}} else {// 没有文件上传$result array(code 202,msg 没有选择要上传的文件);}// JSONecho json_encode($result, JSON_UNESCAPED_UNICODE);
?作者
TANKING
