考试首页 | 考试用书 | 培训课程 | 模拟考场 | 考试论坛  
  当前位置:编程开发 > AJAX > 文章内容
  

AJAX教程:AJAX实现图片预览与上传及生成缩略图的方法

 [ 2017年8月9日 ] 【

  要实现功能,上传图片时可以预览,因还有别的文字,所以并不只上传图片,实现与别的文字一起保存,当然上来先上传图片,然后把路径和别的文字一起写入数据库;同时为 图片生成缩略图,现只写上传图片方法,文字在ajax里直接传参数就可以了,若要上传多图,修改一下就可以了。

  借鉴了网上资料,自己写了一下,并不需要再新加页面,只在一个页面里就OK啦。

  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
//ajax保存数据,后台方法里实现此方法
function SaveData() { 
    filename = document.getElementById("idFile").value;
    result =test_test_aspx.SaveData(filename).value;
    if (result) {
      alert("保存成功!");     
    }
    return false;
  
//实现预览功能
  function DrawImage(ImgD) {
    var preW = 118;
    var preH = 118;
    var image = new Image();
    image.src = ImgD.src;
    if (image.width > 0 && image.height > 0) {
      flag = true;
      if (image.width / image.height >= preW/ preH) {
        if (image.width > preW) {
          ImgD.width = preW;
          ImgD.height = (image.height * preW) / image.width;
        }
        else {
          ImgD.width = image.width;
          ImgD.height = image.height;
        }
        ImgD.alt = image.width + "x" + image.height;
      }
      else {
        if (image.height > preH) {
          ImgD.height = preH;
          ImgD.width = (image.width * preH) / image.height;
        }
        else {
          ImgD.width = image.width;
          ImgD.height = image.height;
        }
        ImgD.alt = image.width + "x" + image.height;
      }
    }
  }
//当idFile内容改变时
  function FileChange(Value) {
    flag = false;
    document.getElementById("showImg").style.display = "none";   
    document.getElementById("idImg").width = 10;
    document.getElementById("idImg").height = 10;
    document.getElementById("idImg").alt = "";
    document.getElementById("idImg").src = Value;
  }

  以下为前台代码:

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="cbs">
<div class="l"><label>图片:label>div>
<div>
  <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" />
div>
    div
    <div class="cbs">
<div class="l"><label>预览:label>div>
<div>
  <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //实现预览
  <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/>  //加这个主要是为了实现查看时显示图片,因为上面的(idImg)加上runat="server" 报错,如有好的方法可以留言    
div>
div>
首页 1 2 3 尾页
本文纠错】【告诉好友】【打印此文】【返回顶部
将考试网添加到收藏夹 | 每次上网自动访问考试网 | 复制本页地址,传给QQ/MSN上的好友 | 申请链接 | 意见留言 TOP
关于本站  网站声明  广告服务  联系方式  站内导航  考试论坛
Copyright © 2007-2013 中华考试网(Examw.com) All Rights Reserved