图片上传预览

最新推荐文章于 2025-08-20 22:56:05 发布

Mathilda91

最新推荐文章于 2025-08-20 22:56:05 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签：人工智能

原文链接：http://www.cnblogs.com/TigerZhang-home/p/8301486.html

本文介绍了一种使用HTML和JavaScript实现的图片预览及上传功能。通过自定义的previewImage函数，用户可以在选择图片文件后立即看到预览效果，并调整图片大小。此外，还提供了一个用于提交图片和其他表单数据的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

htnl结构：

 <div id="preview">
    <img id="imghead" name="image" src="../../img/photo_icon.png" style="width:90px;height:90px;" onclick="$('#ImgFile').click();">
 </div>
 <input type="file" name="file" onchange="previewImage(this)" style="display: none;" id="ImgFile">

封装好的预览图片方法：

//图片预览
//图片上传预览    IE是用了滤镜。
function previewImage(file) {
	var MAXWIDTH = 90;
	var MAXHEIGHT = 90;
	var div = document.getElementById('preview');
	if(file.files && file.files[0]) {
		div.innerHTML = '<img id=imghead onclick=$("#ImgFile").click()>';
		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.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;
}

　　点击上传图片时可先放置一默认图片，选择图片时可预览，可上传。

//提交新增数据
function addIndustrySpace() {
  var flag = checkForm();
  if(flag == 0) return;
  var formData = new FormData();
  formData.append("name", $("input[name='name']").val());
  formData.append("sort", $("input[name='sort']").val());
  formData.append("parentId", $("input[name='parentId']").val());
  formData.append("targetId", $("input[name='targetId']").val());
  formData.append("description", $("textarea[name='description']").val());
  formData.append("ImgFile", document.getElementById("ImgFile").files[0]); //此处为上传图片的方法
  formData.append("SysType", "10101");
  formData.append("SysName", "qxPC");
  formData.append("ModuleName", "空间分类");
  $.ajax({
    type: 'post',
    url: _URL_BASE + '/industrySpace/addIndustrySpace',
    data: formData,
    cache: false,
    contentType: false,
    processData: false,
    dataType: 'json',
    success: function(retData) {
      if(retData.ReturnType == "1001") {
        qxMsg("添加成功");
        $(".layui-layer-btn0").click(function() {
          $('.modal-backdrop').remove();
          $("#myModal").hide();
          getIndustrySpaceData();
        })
      } else if(retData.ReturnType == "4004") {
        kickout();
      } else {
        qxMsg(retData.Message);
      }
    },
    error: function(retData) {
      qxMsg("提交出错");
    }
  });
}

转载于:https://www.cnblogs.com/TigerZhang-home/p/8301486.html