基于HTML如何做出多图上传预览效果


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来基于HTML如何做出多图上传预览效果,基于HTML做出多图上传预览效果的注意事项有哪些,下面就是实战案例,一起来看一下。

自己最近写了一个网页多图上传的脚本,感觉挺实用的,细节就不要说了,直接贴代码了~

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

<head>

<style>

.pro_img{ margin-left:10px;margin-top:10px;width:300px;height: 300px;background-color: black; --border-radius:999em;  overflow:hidden;float:left; --margin:5% 35%;position: relative;}

.pro_img img{ position: absolute;left: 50%;top:50%;   transform: translate(-50%,-50%);width: 100%

}

.pro_img {position:relative}

.pro_img input{position: absolute;width: 100%;height: 100%;margin:0;opacity:0;z-index: 100;}

</style>

<script type="text/javascript" src="jquery.min.js"></script>

<script>

name_pic=1;

function t1(o){

//alert(name_pic);

    if(o==1 || name_pic!=1){

    var file="file"+o;

    var img="img"+o;

    var hid="hidden"+o;

    var aa="a"+o;

    }else{

    var file="file"+name_pic;

    var img="img"+name_pic;

    var hid="hidden"+name_pic;

    var aa="a"+name_pic;

    }

    var docObj = document.getElementById(file);

    var imgObjPreview = document.getElementById(img);

    var hidden=document.getElementById(hid);

    // alert(hidden);

    if (docObj.files && docObj.files[0]) {

        hidden.src=window.URL.createObjectURL(docObj.files[0]); //获取file文件的路径

        hidden.onload=function(){

            var width=hidden.width;

            var height=hidden.height;

            var a=document.getElementById(aa);

                if(width>height){

                imgObjPreview.style.cssText='width:100%';   //重写css样式

                }else{

                imgObjPreview.style.cssText='height:100%;width:auto;';                

                }

        imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);

        imgObjPreview.style.display = 'block';

        }

    }else{

        return false;

    }

    if(o==name_pic){

        var count=$('.pro_img').length;

        if(count<6){

        name_pic++;

    var pic_div="<a class='pro_img' id='a"+name_pic+"' ><input type='file' id='file"+name_pic+"'  accept='image/*' multiple='multiple' name='pic[]' onchange='t1("+name_pic+")'/><img src='upload.jpg' id='img"+name_pic+"'></a><img  id='hidden"+name_pic+"' style='display:none;'>";

    $('#upload').append(pic_div);

    }     

}

}

</script>

</head>

<!-- multiple='multiple' -->

<form action="http://192.168.0.7/index.php/Home/Pic/upload" enctype="multipart/form-data" method="post">

<div id='upload'>

<a class='pro_img' id='a1' >

<input type='file' id='file1'  accept='image/*' multiple='multiple' name='pic[]' onchange='t1(1)'/>

<img src='upload.jpg' id='img1'></a>

<img  id='hidden1' style='display:none;'>

</div>

<input type='submit' value="上传" />

</form>

自己替换一些upload.png这张图片就能达到自己的需求,如果说图片点击没反应,别忘了加入jquery

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

H5的本地存储和本地数据库详细介绍

怎样用h5的sse服务器发送EventSource事件

h5如何实现记住密码功能

以上就是基于HTML如何做出多图上传预览效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html meta标签的作用是什么?Html meta标签的使用方法介绍

Html中的特殊字符如何源码输出

Html怎么和js连接

添加背景音乐的Html标签是什么

Html 空链接 href="#"与href="javascript:void(0)"的区别

script标签在Html中的作用是什么?script标签中type属性的用法是什么?

Html格式什么意思?

Html中如何直接显示Html代码

Html标签属性的作用/语法

Html基础之选择器

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...