编程 自定义input文件上传 file的提示文字及样式

2024-11-17 05:01:13 +0800 CST views 4267
<style>
.upload{
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    text-decoration: none;
    color: #4d90d3;
    cursor: pointer;
}
.replyFileid{
    width:100%;
    position: absolute;
    overflow: hidden;
    right: 0;
    top: 0;
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
}
.upload span{
    color:#999;
    cursor: pointer;
}
</style>

<a href="javascript:void(0);" class="upload" onclick='javascript:$("#smms_pick").click();'>选择文件  <span id="cxtinfo">未选择任何文件</span>
    <input class="replyFileid" type="file" onchange="smms_cpick1()" id="smms_pick" accept="image/jpeg,image/png,image/gif" style="display:none"/>
</a>
function smms_cpick(){
    if(!document.getElementById('smms_pick').files.length){return;};
    $("#cxtinfo").text(document.getElementById('smms_pick').files[0].name);
    console.log(document.getElementById('smms_pick').files[0].name);
    var myfd=new FormData();myfd.append('file',document.getElementById('smms_pick').files[0]);
        myfd.append("Token","ef03c586c8245c438761a76773d5faf201ebbf19:KsmRlHun4Ea:eyJkZWFkbGluZSI6MTU3NzM3NDAyMCwiYWN0aW9uIjoiZ2V0IiwidWlkIjoiNzAzMTc1IiwiYWlkIjoiMTY0MzQ3NyIsImZyb20iOiJmaWxlIn0=");
    var ajax=$.ajax({url:'http://up.imgapi.com/',type:'POST',processData:false,contentType:false,data:myfd,success:function(res){
        if (res.linkurl){$("#beizhu").val(res.linkurl);}
    }
    });
}

1.png

复制全文 生成海报 前端开发 文件上传 JavaScript HTML AJAX

推荐文章

任务管理工具的HTML
2025-01-20 22:36:11 +0800 CST
php获取当前域名
2024-11-18 00:12:48 +0800 CST
H5抖音商城小黄车购物系统
2024-11-19 08:04:29 +0800 CST
Nginx 实操指南:从入门到精通
2024-11-19 04:16:19 +0800 CST
PHP 压缩包脚本功能说明
2024-11-19 03:35:29 +0800 CST
Git 常用命令详解
2024-11-18 16:57:24 +0800 CST
Vue3中的v-slot指令有什么改变?
2024-11-18 07:32:50 +0800 CST
Web浏览器的定时器问题思考
2024-11-18 22:19:55 +0800 CST
在 Rust 中使用 OpenCV 进行绘图
2024-11-19 06:58:07 +0800 CST
Vue3中的v-for指令有什么新特性?
2024-11-18 12:34:09 +0800 CST
Grid布局的简洁性和高效性
2024-11-18 03:48:02 +0800 CST
LLM驱动的强大网络爬虫工具
2024-11-19 07:37:07 +0800 CST
Linux 网站访问日志分析脚本
2024-11-18 19:58:45 +0800 CST
windon安装beego框架记录
2024-11-19 09:55:33 +0800 CST
php微信文章推广管理系统
2024-11-19 00:50:36 +0800 CST
使用 sync.Pool 优化 Go 程序性能
2024-11-19 05:56:51 +0800 CST
Go 中的单例模式
2024-11-17 21:23:29 +0800 CST
12 个精选 MCP 网站推荐
2025-06-10 13:26:28 +0800 CST
免费常用API接口分享
2024-11-19 09:25:07 +0800 CST
Vue3中的Slots有哪些变化?
2024-11-18 16:34:49 +0800 CST
避免 Go 语言中的接口污染
2024-11-19 05:20:53 +0800 CST
程序员茄子在线接单