js教程

葫芦侠图床JavaScript提交代码

我的站长站 2023-07-16 人阅读

提交表单代码:

<form action="#" method="POST" enctype="multipart/form-data" id="upload-form">      
<label for="file">选择一个图像文件:</label>    
<input type="file" id="file" name="file" accept="image/*"><br>    
<input type="submit" value="上传">    
<div class="status" id="status"></div>    
</form>

JavaScript提交代码:

<script>    
const form = document.getElementById('upload-form');    
const status = document.getElementById('status');    
form.addEventListener('submit', event => {    
event.preventDefault();    
status.style.display = 'none';    
const fileInput = document.getElementById('file');    
const file = fileInput.files[0];    
if (!file) {    
showError('Please choose a file to upload.');    
return;    
}    
const formData = new FormData();    
formData.append('file', file);    
const xhr = new XMLHttpRequest();    
xhr.onreadystatechange = function() {    
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {    
try {    
const responseJson = JSON.parse(xhr.responseText);    
const url = responseJson.url;    
if (url) {    
showSuccess(`图片网址 ${url}`);    
} else {    
showError('Failed to upload the image.');    
}    
} catch (error) {    
showError('Failed to parse the response from the server.');    
}    
} else if (this.readyState === XMLHttpRequest.DONE) {    
showError(`Server returned status code ${xhr.status}.`);    
}    
};    
xhr.open('POST', 'https://api.suyanw.cn/huluxia/upload.php');    
xhr.send(formData);    
function showSuccess(message) {    
status.textContent = message;    
status.classList.remove('error');    
status.classList.add('success');    
status.style.display = 'block';    
}    
function showError(message) {    
status.textContent = message;    
status.classList.remove('success');    
status.classList.add('error');    
status.style.display = 'block';    
}    
});    
</script>


相关专题
图床
图床
2021-10-10 1183

图床专题为您整理收藏本站所有关于图床相关详细资源,主要为各语言图床源码下载,各程序图床插件下载和图床上传工具软件下载....

相关推荐
  • js代码
  • 图床源码
  • 葫芦侠
  • js指定时间定时自动执行代码分享

    示例代码用的`setTimeout()`函数,在指定的时间后执行。代码非常的简单,获取当前时间和设定一个指定时间,指定时间减去当前时间就是定时的时间,如果定时器到期时等于0,就代表时间到了,就运行executeAtTime函数的方法。function executeAtTime() { console....

    js教程 40 6个月前
  • JS代码解除网页右键限制

    JS解除右键限制方法一javascript:(function () {function R(a) {ona = "on" + a;if (window.addEventListener){window.addEventListener(a, function (e) {for (var n = e.originalTarget; n; n = n.parentNode){n[ona] = null;}}, true);}window[o...

    js教程 171 3年前
  • 淘宝买家秀API+ajax代码

    淘宝买家秀API+ajax代码,用的是这个API,https://api.66mz8.com/api/rand.tbimg.php?format=jsonJSON返回格式,测试依旧可用。$(function(){ $.get('https://api.66mz8.com/api/rand.tbimg.php?format=json',function(data){ document.getElementB...

    js教程 713 3年前
  • php小猫咪图床源码V1.8
    php小猫咪图床源码V1.8

    源码介绍小猫咪图床源码V1.8,无需数据库,拥有叁楼,戒指,bilibili,搜狗,本地等7个图床。源码截图使用说明后台为http://域名/admin默认key为123456修改key地址http://域名/admin/key.php建议修改后台地...

    php源码 116 2年前
  • PHP图片托管图床源码
    PHP图片托管图床源码

    网站源码介绍PHP图片托管图床源码主要功能是图片托管,分别有两个上传入口,一个是他人上传的接口 链接:[域名/index.php],另外一个是后台上传接口 链接:[域名/Admin/upload.php]PHP图床源码截图源码...

    php源码 157 3年前
  • php+js简单的阿里图床源码
    php+js简单的阿里图床源码

    php+js简单的阿里图床源码,美观且极简响应式,修复了浏览器复制出错的bug。使用方法:上传到PHP环境就可以直接使用,没啥好介绍的了。阿里图床源码截图...

    php源码 158 3年前
  • 葫芦侠图床JavaScript提交代码
    葫芦侠图床JavaScript提交代码

    提交表单代码:<form action="#" method="POST" enctype="multipart/form-data" id="upload-form"> <label for="file">选择一个图像文件:</label> <input type="file" id="file" name=...

    js教程 24 9个月前
  • 最新可用版葫芦侠图床源码
    最新可用版葫芦侠图床源码

    源码介绍最新可用版葫芦侠图床源码,PHP+HTML双版本,主要为HTML+JS开发。上传接口用的第三方API接口,不保证永远可用。接口地址:https://api.suyanw.cn/huluxia/upload.php源码截图...

    php源码 96 9个月前
  • php葫芦侠一键签到工具网页版源码
    php葫芦侠一键签到工具网页版源码

    源码介绍葫芦侠一键签到工具网页版源码,PHP7+、无需数据库安装教程:上传压缩包至根目录解压即可配置教程:请使用文本编辑器 编辑config.php源码截图功能介绍+收集50+可签到板块 包含大量隐藏板块+支...

    php源码 166 2年前
最新更新
  • js截取字符串教程

    slice()方法接受两个参数,起始索引和结束索引(可选)。它返回从起始索引到结束索引(不包括结束索引)之间的子字符...

    js教程 2个月前
  • find findIndex indexOf索引选择器使用方法

    find使用方法find方法是ES6引入的一种数组方法,可以用来查找数组中符合条件的元素。语法是:array.find(callba...

    js教程 3个月前
  • js复制网页内容教程

    Async Clipboard API方法HTML5新增的方法,无需引入第三方插件,直接就可以复制内容。低版本的浏览器可能会不兼...

    js教程 3个月前
  • js获取字符长度函数分享

    js获取字符长度函数function objLen(str) { if (str == null) return 0; if (typeof str != "string") { ...

    js教程 3个月前
  • 网站LED跑马灯效果广告代码

    网站可以看到很多的论坛网站都会用到这种网站LED跑马灯效果,这种效果实现也很简单,分享给大家。LED跑马灯效果...

    js教程 4个月前