上传图片 file 更改样式
程序员文章站
2022-06-07 13:50:54
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传文件</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
function uploadImgFn(){
var del = "<a href='#this' onclick='uploadImgFnDel()' title='删除'>×</a> ";
$('#uploadImgValue').html(del);
var imgName = $('#uploadImg').val().substr($('#uploadImg').val().lastIndexOf("\\")+1);
var imgNewName = imgName.substr(0,20);
$('#uploadImgValue').append(imgNewName);
}
function uplaodImgFnTell(){
$('#uploadImgHiddenTell').val('1');
}
function uploadImgFnDel(){
$('#uploadImg').val('');
$('#uploadImgValue').html('');
$('#uploadImgHiddenTell').val('0');
}
function update(){
if( $('#uploadImgHiddenTell').val() == '1'){
alert('上传文件');
}
else{
alert('异步交互')
}
$('#formContent').focus();
}
</script>
<style>
body a {
text-decoration:none;
color:#983c1b;
}
body a:hover {
color:#024c9f;
}
#layout{
margin:0 auto;
padding:10px;
width:500px;
border:1px solid #333;
text-align:right;
}
#formContent{
width:300px;
height:50px;
overflow:auto;
}
#uploadImg {
filter:alpha(opacity=0);
opacity:0;
width:30px;
position:relative;
z-index:98;
}
.uploadImgValue {
font-size:12px;
color:#666;
position:relative;
left:30px;
*left:5px;
}
*html .uploadImgValue {
font-size:12px;
color:#666;
position:relative;
left:65px;
}
#uploadImgTxt {
color:#983c1b;
font-size:14px;
position:relative;
left:30px;
z-index:97px;
}
*html #uploadImgTxt {
color:#983c1b;
font-size:14px;
position:relative;
left:75px;
z-index:97px;
}
#formButton{
position:relative;
z-index:99;
}
</style>
</head>
<body>
<div id="layout">
<form action="upload.html" method="post" enctype="multipart/form-data">
<p><textarea id="formContent" name="formContent" tabindex="1"></textarea></p>
<p><span id="uploadImgValue" class="uploadImgValue"></span> <span id="uploadImgTxt">图片</span>
<input type="file" name="uploadImg" value="浏览文件" id="uploadImg" onchange="uploadImgFn();uplaodImgFnTell()" accept= "image/jpeg,image/gif,image/png" title="上传图片" onmouseover="$('#uploadImgTxt').css('color','#024c9f');" onmouseout="$('#uploadImgTxt').css('color','#983c1b');"/>
<input type="button" value="加入列队" onclick="update()" id="formButton" tabindex="2"/></p>
<p><input type="hidden" id="uploadImgHiddenTell" value="0" /></p>
</form>
</div>
</body>
</html>转载于:https://my.oschina.net/fedde/blog/169645
上一篇： 简单的表单验证更改样式
推荐阅读
-
通过Canvas及File API缩放并上传图片完整示例
-
ionic cordova一次上传多张图片（类似input file提交表单)的实现方法
-
jQuery上传多张图片带进度条样式（DEMO）
-
iOS上传图片和视频（base64和file）
-
图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
-
百度编辑器ueditor更改图片和附件上传路径的方法
-
php5.6 上传图片error代码为6 或者 报错“PHP Warning: File upload error - unable to create a temporary file in Unknown on line 0”的解决办法
-
input file样式修改以及图片预览删除功能详细概括（推荐）
-
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
-
input file图片上传