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

2024-11-17 05:01:13 +0800 CST views 4623
<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

推荐文章

在Rust项目中使用SQLite数据库
2024-11-19 08:48:00 +0800 CST
前端如何一次性渲染十万条数据?
2024-11-19 05:08:27 +0800 CST
解决python “No module named pip”
2024-11-18 11:49:18 +0800 CST
php客服服务管理系统
2024-11-19 06:48:35 +0800 CST
pin.gl是基于WebRTC的屏幕共享工具
2024-11-19 06:38:05 +0800 CST
18个实用的 JavaScript 函数
2024-11-17 18:10:35 +0800 CST
PHP如何进行MySQL数据备份?
2024-11-18 20:40:25 +0800 CST
Vue 3 中的 Fragments 是什么?
2024-11-17 17:05:46 +0800 CST
Vue3中如何扩展VNode?
2024-11-17 19:33:18 +0800 CST
Boost.Asio: 一个美轮美奂的C++库
2024-11-18 23:09:42 +0800 CST
前端如何优化资源加载
2024-11-18 13:35:45 +0800 CST
黑客帝国代码雨效果
2024-11-19 01:49:31 +0800 CST
前端代码规范 - Commit 提交规范
2024-11-18 10:18:08 +0800 CST
Graphene:一个无敌的 Python 库!
2024-11-19 04:32:49 +0800 CST
WebSQL数据库:HTML5的非标准伴侣
2024-11-18 22:44:20 +0800 CST
html5在客户端存储数据
2024-11-17 05:02:17 +0800 CST
paint-board:趣味性艺术画板
2024-11-19 07:43:41 +0800 CST
java MySQL如何获取唯一订单编号?
2024-11-18 18:51:44 +0800 CST
程序员茄子在线接单