首页 新闻 会员 周边 捐助

怎样用js在span标签中添加上传图片功能

0
悬赏园豆：80 [已解决问题] 解决于 2015-12-31 14:38

textarea标签是自己做的一个百度编辑器

 

赖先森的主页 赖先森 | 初学一级 | 园豆：61
提问于：2015-12-31 11:03
< >
分享
最佳答案
0

我明白你的意思了 ，可以先把input上传标签隐藏 然后用label与它关联 可以给label设置样式，点击label时触发上传文件供能，代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
#a1{
    display: none;
}
#a2{
            display: block;
            width: 100px;
            height: 20px;
            background: black;
        }

    </style>

</head>
<body>
<span>
    <label for="a1" id="a2">
        <input type="file" id="a1">
    </label>
</span>
</body>
</html>

 

收获园豆：60
默然沉醉 | 菜鸟二级 |园豆：372 | 2015-12-31 11:25
其他回答(3)
0

在span里添加图片，可以让span标签里面包一个img标签。这样就可以完成span里面添加一张图片了。下面是个小例子：
<body>
<span style="width:100px; height:100px; border:1px solid #ccc; display:block" id="span1"></span>
</body>
<script>
var oSpan = document.getElementById('span1');
var oImg = document.createElement('img');   //创建一个img标签
oImg.src = '../../abc.jpg';    //给img标签添加src属性
oSpan.appendChild(oImg);    //将img标签添加到span标签里面。
</script>
通过上述code就可以实现span里面添加一张图片

收获园豆：5
土dou | 园豆：166 (初学一级) | 2015-12-31 11:06

我要的是上传图片的功能。跟file标签一样的功能

支持(0) 反对(0) 赖先森 | 园豆：61 (初学一级) | 2015-12-31 11:10

@赖先森: 

 

 


调用file元素的click()方法来触发打开选择文件对话框。

document.getElementsByName["headPic"][0].click();
支持(0) 反对(1) 土dou | 园豆：166 (初学一级) | 2015-12-31 11:14

@赖先森: 我明白你的意思了 ，可以先把input上传标签隐藏 然后用label与它关联 可以给label设置样式，点击label时触发上传文件供能，代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
#a1{
    display: none;
}
        #a2{
            display: block;
            width: 100px;
            height: 20px;
            background: black;
        }

    </style>

</head>
<body>
<span>
    <label for="a1" id="a2">
        <input type="file" id="a1">
    </label>
</span>
</body>
</html>
支持(1) 反对(0) 默然沉醉 | 园豆：372 (菜鸟二级) | 2015-12-31 11:31
0

http://www.w3cfuns.com/article-5597760-1-1.html

收获园豆：10
_Arnold | 园豆：635 (小虾三级) | 2015-12-31 11:07
0

上传组件及原理，可以参考也可以直接使用：

http://www.cnblogs.com/devin87/p/web-uploader.html

收获园豆：5
Devin Liu | 园豆：215 (菜鸟二级) | 2015-12-31 11:16
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。