ホームページ > ウェブフロントエンド > jsチュートリアル > js はアップロードされた画像のタイムリーなプレビューを実装します_javascript スキル

js はアップロードされた画像のタイムリーなプレビューを実装します_javascript スキル

WBOY
リリース: 2016-05-16 15:01:34
オリジナル
1473 人が閲覧しました

この記事の例では、JavaScript 画像プレビュー機能を実装するための具体的なコードを共有します。具体的な内容は次のとおりです。

まず、Firefox および Google Chrome と互換性のある、js 画像プレビューに関するコードを共有しましょう

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

/* 案例展示图片预览 */

$(function(){

  $("#file0").bind("change",function(){

  

    clickupLoad();

  });

});

function clickupLoad(){

  

  var imgObject = document.getElementById('file0');

  var getImageSrc = getFullPath(imgObject); // 本地路径

  var srcs = window.URL.createObjectURL(imgObject.files[0]);

  var pos = getImageSrc.lastIndexOf(".");

  var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀]

    

  if(srcs!=""){

    $("#yulan2").attr("src",srcs);

  }else{

    alert("请选择一张图片");

  }

    

}

function getFullPath(obj) {  //得到图片的完整路径

  if (obj)

  {

    if (window.navigator.userAgent.indexOf("MSIE") >= 1){

      obj.select();

      return document.selection.createRange().text;

      

    }else if(window.navigator.userAgent.indexOf("Firefox") >= 1) {

      if (obj.files) {

        return window.URL.createObjectURL(obj.files[0]);

      }

      return obj.value;

    }

    return obj.value;

  }

}

ログイン後にコピー

js 経由でアップロードされた画像のタイムリーなプレビューを実装するコード例:

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

67

68

69

70

71

72

73

74

75

76

<html>

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>图片上传本地预览</title>  

<style type="text/css">

#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}

#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}

</style>

<script type="text/javascript">

  

  

        //图片上传预览  IE是用了滤镜。

    function previewImage(file)

    {

     var MAXWIDTH = 260;

     var MAXHEIGHT = 180;

     var div = document.getElementById('preview');

     if (file.files && file.files[0])

     {

       div.innerHTML ='<img id=imghead>';

       var img = document.getElementById('imghead');

       img.onload = function(){

        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

        img.width = rect.width;

        img.height = rect.height;

//         img.style.marginLeft = rect.left+'px';

        img.style.marginTop = rect.top+'px';

       }

       var reader = new FileReader();

       reader.onload = function(evt){img.src = evt.target.result;}

       reader.readAsDataURL(file.files[0]);

     }

     else //兼容IE

     {

      var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';

      file.select();

      var src = document.selection.createRange().text;

      div.innerHTML = '<img id=imghead>';

      var img = document.getElementById('imghead');

      img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;

      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);

      status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);

      div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";

     }

    }

    function clacImgZoomParam( maxWidth, maxHeight, width, height ){

      var param = {top:0, left:0, width:width, height:height};

      if( width>maxWidth || height>maxHeight )

      {

        rateWidth = width / maxWidth;

        rateHeight = height / maxHeight;

          

        if( rateWidth > rateHeight )

        {

          param.width = maxWidth;

          param.height = Math.round(height / rateWidth);

        }else

        {

          param.width = Math.round(width / rateHeight);

          param.height = maxHeight;

        }

      }

        

      param.left = Math.round((maxWidth - param.width) / 2);

      param.top = Math.round((maxHeight - param.height) / 2);

      return param;

    }

</script>  

</head>  

<body>

<div id="preview">

  <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>

</div>

<input type="file" onchange="previewImage(this)" />  

</body>  

</html>

ログイン後にコピー

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート