HTML多图上传预览功能的实现


本文摘自PHP中文网,作者小云云,侵删。

最近平凡用到网页多图上传预览的功能,感觉挺不错的,今天小编抽空给大家分享下基于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_p="<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_p);

    }      

}

}

</script>

</head>

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

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

<p 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;'>

</p>

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

</form>

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

相关推荐:

javascript实现异步图片上传方法实例

HTML5图片上传预处理

php和ajax以及h5实现图片上传功能的实例

以上就是HTML多图上传预览功能的实现的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html如何实现tab页面切换

Html怎么改变标签的字体

Html中form与表单提交操作的方法总结

Html的表单组件如何使用

Html中的空格代码是什么

Html块级、行级元素介绍

为什么要用div+css布局

Html和css给文字添加删除线的三种方法(图文)

Html怎样做出鼠标经停时(tr)变色

post提交获得Html页面源码的实现代码

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




打赏

取消

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

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

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

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

评论

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