`
duanfei
  • 浏览: 733702 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

图片上传大小和预览

    博客分类：
  • JSP
JSPStrutsXHTMLHTMLUP 
阅读更多 
<input type="text" size="4" value="10" name="fileSizeLimit" id="fileSizeLimit"/> 
<input type="file" name="file1" id="file1" size="40" onchange="changeSrc(this)"/>
<img src="about:blank" id="fileChecker" alt="test"  height="18"/>

<script type="text/javascript">
//前面为网页
var oFileChecker = document.getElementById("fileChecker");
    
function changeSrc(filePicker)
{
    oFileChecker.src = filePicker.value;//读图片
}
    
//这个很重要，判断是否完全读完，否则判断图片大小不准确
oFileChecker.onreadystatechange = function ()
{
     if (oFileChecker.readyState == "complete")
     {
        checkSize();
     }
}
    
function checkSize()
{
     var limit  = document.getElementById("fileSizeLimit").value * 1024;
    
     if (oFileChecker.fileSize > limit)
     {
        alert("too large");
     }
     else
     {
        alert("ok");
     }
}
</script>




<%@page contentType="text/html; charset=UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="dict" uri="/dict-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<%@include file="/jsp/common.jsp"%>
<style type="text/css">
.thumbImage{
	max-width:300px;
	max-height:340px;
　　} 
</style>
<script type="text/javascript" src="js/branchAftercareWorkMgr.js"></script>
</head>

<body>
<%@include file="/jsp/include/navigation.jsp"%>
<form onsubmit="return up_load();" id="branchAftercareWorkForm" name="branchAftercareWorkForm" action="<%=request.getContextPath()%>/uploads_fileUpload.do?maximumSize=512000&allowedTypes=image/bmp,image/png,image/x-png,image/gif,image/jpeg,image/pjpeg&path=branchAftercareWork" method="post" enctype="multipart/form-data" target="aaa">
<s:hidden id="elisorId" name="branchAftercareWorkForm.elisorId"></s:hidden>
<s:hidden id="year" name="branchAftercareWorkForm.year"></s:hidden>
<s:hidden id="docType" name="branchAftercareWorkForm.docType"></s:hidden>
<table class="bg" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td>
    <table class="tb_add" width="100%" border="0" cellpadding="1" cellspacing="1">
    <tr>
     <td class="td_title" colspan="3" align="center">附件上传</td>
      </tr>
      <tr> 
      </tr>
      <tr>
	 <th class="tb_lable" width="25%" align="right">附件一：</th>
	 <td>
	 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	 <td align="center" width="300" id="td1">
	 <input id="cl_picture1" type="file" name="upload"  style='width:300px' ContentEditable="false" onchange="showPicture('btn1');"/>
	 </td>
	 <td align="left">
	 <input type="button" id="btn1" style="width:60px;height:19px" value="重置" disabled="disabled" onclick="deleteFilePath('td1');"/>
	 </td>
	 </tr>
	 </table>
	 <div id="cl_picture1Tip"></div>
	 </td>
	 <td width="30%" style="text-align:center">图片预览</td>
	 </tr>
	 <tr>
	 <th class="tb_lable" align="right">附件二：</th>
	 <td>
	 <table width="100%" border="0" cellpadding="0" cellspacing="0">
	 <tr>
	 <td align="center" width="300" id="td2">
	 <input id="cl_picture2" type="file" name="upload"  style='width:300px' ContentEditable="false" onchange="showPicture('btn2');"/>
	 </td>
	<td align="left">
	 <input type="button" id="btn2" style="width:60px;height:19px" value="重置" disabled="disabled" onclick="deleteFilePath('td2');"/>
	 </td>
	 </tr>
	 </table>
	 <div id="cl_picture2Tip"></div>
	 </td>
	 <td rowspan="7" id="tdUpload" style="text-align:center"></td>
	 </tr>
	 <tr>
	 <td class="bottom" align="center" colspan="3">
	 <input value="上传" type="submit"  onmouseout="this.className = 'button'"
	 class="button"	onmouseover="this.className = 'buttonOver'" />
	 <input value="返回" type="button" onclick="javascript:history.back();"  onmouseout="this.className = 'button'" class="button"	onmouseover="this.className = 'buttonOver'" />
	 </td>
	 </tr>
	 </table>
	 </td>
	 </tr>
  </table>
</form>
<iframe name="aaa" style="display:none"></iframe>
<script type="text/javascript">
function up_load()
{
	$('#button').attr('disabled','disabled');
	var uploadsFileName = document.getElementsByName("upload");
	var sign = false;
	for(var i = 0;i<uploadsFileName.length ;i++)
	{
		if(uploadsFileName[i].value!=null && uploadsFileName[i].value!="" && uploadsFileName[i].value.length> 0)
		{
			sign = true;
			break;
		}
	}
	if(!sign)
	{
		alert("请上传图片");
		return false;
	}
	else
	{
		return true;
	}
}

function success(fileNamse){
	alert("上传成功");
	$('#button').attr('disabled','');
	save_branchAftercareWork(fileNamse);
}

$.formValidator.initConfig( {
	formid :"setForm",
	onerror : function(msg) {
		alert(msg)
	},
	onsuccess : function() {
		return true;
	}
});

$("#cl_picture1").formValidator( {
	onshow :"请上传图片",
	onfocus :"请选择JPG、JEPG等图片文件，大小不要超过500K",
	oncorrect :"路径合法"
});
$("#cl_picture2").formValidator( {
	onshow :"请上传图片",
	onfocus :"请选择JPG、JEPG等图片文件，大小不要超过500K",
	oncorrect :"路径合法"
});


function showPicture(btnid){
	var id = event.srcElement.id;
	var src = document.getElementById(id).value;
	document.getElementById("tdUpload").innerHTML = "<img src='"+src +"' class='thumbImage'/>";	
	document.getElementById(btnid).disabled = "";	
}	

function deleteFilePath(id)
{
	document.getElementById(id).innerHTML="<input type='file' id='cl_picture"+id.substring(id.length-1)+"' name='upload' value='' style='width:300px' ContentEditable='false' onchange='showPicture(\"btn"+id.substring(id.length-1)+"\");'/>";
	document.getElementById("tdUpload").innerHTML = "";
	document.getElementById("btn"+id.substring(id.length-1)).disabled = "disabled";	
}
</script>

</body>
</html>
分享到：
| C#使用Hessian调用JAVA的函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    上传图片预览（限制格式大小）

    本篇将详细介绍如何在`.NET MVC`框架下，结合`HTML`、`JavaScript`（简称Js）和`jQuery`（简称JQ）实现"上传图片预览"功能，并限制上传的图片格式和大小。 首先，我们需要在前端页面创建一个`HTML`表单，包含一个`...

    .Net图片上传预览

    在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...

    图片上传和预览

    在网页开发中，图片上传和预览功能是用户交互中不可或缺的一部分，尤其在社交媒体、电商网站及各种在线表单中尤为常见。这个源码着重解决了在不同浏览器间，包括老旧的Internet Explorer（IE）和Firefox等，实现图片...

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在图片上传中，JS通常用于处理用户选择文件后在本地预览图片，验证文件类型和大小，以及提供一个友好的用户体验，如进度条显示上传进度。 1. **图片预览**：使用HTML5的FileReader API，开发者可以读取用户选择的...

    java 图片上传，可预览可剪切可缩放

    在Java开发中，图片上传、预览、剪切和缩放是常见的功能需求，尤其在Web应用中。这里，我们主要探讨如何实现这些功能，并基于`swfupload`这个库来构建一个完整的解决方案。 首先，`swfupload`是一个古老的Flash上传...

    PHP上传图片带预览功能

    以上代码实现了基本的图片上传和预览功能，但实际应用中可能还需要考虑其他方面，例如错误处理、文件名冲突、安全检查（防止恶意文件上传）、图像尺寸调整等。你可以根据项目需求进一步扩展这些功能，例如通过GD库或...

    C#图片上传,用于winform,带图片预览

    这个项目中的"图片上传"功能覆盖了文件选择、图片处理、网络请求等多个方面，对于理解和掌握C# WinForms应用程序开发具有较高的学习价值。通过对源码的分析和实践，开发者能够深入理解C#中的文件操作、图形处理和...

    struts2图片上传并预览

    在Web开发中，图片上传和预览是常见的功能需求，尤其对于用户交互丰富的应用来说。Struts2提供了一套完善的机制来处理文件上传，包括图片。本文将详细讲解如何利用Struts2实现图片上传并进行预览。 一、Struts2文件...

    图片上传本地预览插件

    - 预览界面：包括缩略图展示、删除选项、旋转按钮等，提供直观的预览和操作界面。 - 进度提示：显示上传进度，增强用户反馈，提升用户体验。 7. 安全性考虑： - CSRF令牌：防止跨站请求伪造攻击，确保上传操作的...

    多文件预览上传-多图片预览上传

    综上所述，"多文件预览上传-多图片预览上传"涉及了前端文件处理、预览、HTTP上传，以及JAVA后端的文件接收和存储等多个技术环节，是一个完整的文件上传解决方案。在实际应用中，还需要结合具体的业务需求和安全策略...

    多图片上传带图片预览功能

    在IT领域，多图片上传和图片预览功能是网页应用中常见的需求，尤其在社交媒体、电商网站和内容管理系统中。这个ASP程序提供了这样的功能，允许用户在上传多张图片前进行预览，提高了用户体验和交互性。下面我们将...

    php上传图片并预览源码

    这个"php上传图片并预览源码"示例提供了HTML和PHP两种语言的代码，帮助开发者理解如何实现这一功能。下面我们将深入探讨其中涉及的关键知识点。 1. **表单（HTML）**： HTML页面通常使用`&lt;form&gt;`元素来创建一个...

    .net批量上传图片带预览功能

    在.NET开发环境中，批量上传图片并提供预览和进度条功能是常见的需求，尤其是在构建Web应用时。这个项目提供了一种实现方式，包括源码，可以直接用于开发中。以下是对这个知识点的详细解释： 批量上传图片：批量...

    html5图片上传插件预览图片尺寸大小上传代码

    HTML5图片上传插件是现代网页开发中常用的一种功能，它允许用户在网站上选择并上传图片，同时提供预览和尺寸调整等便利性。在HTML5中，File API的引入使得开发者能够直接操作用户的本地文件，实现了无刷新的图片预览...

    图片上传即时预览

    在IT行业中，图片上传即时预览是一项常见的功能，特别是在网页应用和社交媒体平台中。这个功能允许用户在上传图片之前能够看到即将上传的图片效果，提高了用户体验。本项目是基于ASP.NET后端技术和jQuery前端库实现...

    java实现图片上传预览

    以上就是使用Java、JSP和ASP.NET实现图片上传预览的基本步骤。在实际项目中，还需要考虑错误处理、文件大小限制、文件类型检查等安全性问题，以及优化用户体验，如进度条显示、异步上传等。此外，为了防止跨站脚本...

    input file上传图片预览

    在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...

    js图片上传并预览图片

    在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的...以上是实现“js图片上传并预览图片”的主要技术点和步骤，理解并掌握这些知识点，可以构建出稳定且用户体验良好的图片上传预览功能。

    上传并预览图片

    1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型...

    fileupload上传图片前预览

    在ASP.NET开发中，FileUpload控件是用于处理用户上传文件的核心组件，特别是处理图片上传时，为了提供更好的用户体验，通常需要在用户正式提交前实现图片预览功能。这一功能可以减少用户因错误选择或不符合规格的...

Magicbox
Global site tag (gtag.js) - Google Analytics