怎么在js 里面限制上传图片的大小不能超过 1M?

JavaScript08

怎么在js 里面限制上传图片的大小不能超过 1M?,第1张

这样设置的:

1、先用form标签创建一个上传的表单。

<form id="form1" name="form1" method="post" action="" enctype="multipart/form-data">

 <p><input type="hidden" name="MAX_FILE_SIZE" value="100000" /></p>

 <p><input name="userfile" id="userfile" type="file" onchange="check()"/></p>

</form>

2、用Javascript设置格式和大小。

<script language="JavaScript" type="text/javascript">  function check()    {var aa=document.getElementById("userfile").value.toLowerCase().split('.')//以“.”分隔上传文件字符串   // var aa=document.form1.userfile.value.toLowerCase().split('.')//以“.”分隔上传文件字符串           if(document.form1.userfile.value=="")    {        alert('图片不能为空!')        return false    }    else    {    if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'

||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式    {var imagSize =  document.getElementById("userfile").files[0].sizealert("图片大小:"+imagSize+"B")if(imagSize<1024*1024*1)        alert("图片大小在1M以内,为:"+imagSize/(1024*1024)+"M")        return true    }    else    {        alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片')//       return false    }    }    }  </script>

图片超过1M则不能上传 如图:

function showImage(fileid,imgid,atagID){

var ext = "_0"

var thumb = $('img#'+imgid)

var litbox = $('a#'+atagID)

var img1path = document.getElementById("img1path")

if($('.onTeedaError').length>0){

//img1path.value=""

}

var messages =document.getElementById("messages")

if(messages!=null){

//img1path.value=""

}

new AjaxUpload(fileid, {

action: '../../PdfChangeImgUploadServlet?pdfNameEnd=_PERT',

name: ext,

onSubmit: function(file, extension) {

extension=extension.toLowerCase()

if(extension=="pdf")

{

$("#photoError").hide()

$.blockUI({

message: $('span#displayBox'),

css: {

border: 'none',

width: '270px',

}

})

}else{

$("#photoError").show()

return false

}

},

onComplete: function(file, response) {

$('.pdfImg').remove()

$('#pfont').hide()

$.unblockUI()

var res = eval('('+response+')')

var timestemp = new Date().getTime()

var srcStr = res['srcStr']

$('#addImg').val(res['srcStr'])

var imgWidth = res['w'] + "px"

var imgHeight = res['h'] + "px"

$("#addImgWidth").val(imgWidth)

$("#addImgHeight").val(imgHeight)

var str = ""

var arr = []

arr = srcStr.split(",")

$('#imgFile').attr("value",srcStr)

for(var i=0i<arr.lengthi++){

var jpgsrc = arr[i] + '?'+ timestemp

if(i == 0){

str=str+"<a class=\"pdfImg\" style=\"margin-left:10px\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"

str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"

str=str+"</a>"

} else {

str=str+"<a class=\"pdfImg\" style=\"margin-left:10pxdisplay:none\" href="+jpgsrc+" rel=\"lightbox"+timestemp+"\">"

str=str+"<img class=\"jpgImgFont\" src="+jpgsrc+" style=\"vertical-align:middlecursor:pointerwidth:"+ imgWidth +"height:"+ imgHeight +" \" />"

str=str+"</a>"

}

}

$('#imgFontDiv').append(str)

//thumb.attr('src', res['src']+'?'+timestemp)

//litbox.attr('href', res['src']+'?'+timestemp)

lightbox.refresh()

$('.jpgImgFont').attr('style', 'width: ' + imgWidth + 'height: ' + imgHeight + "" ).hide().fadeIn('slow')

if(res['img1path']!=""){

img1path.value=res['img1path']

}

if (imgid == 'imgFont') {

document.getElementById("photoName").value=res['srcStr'].substring(res['srcStr'].lastIndexOf("/")+1)

}

//}

}

})

}

function goClearPhoto(textID,imgID,hrefID,photoName){

var _file = document.getElementById(textID)

if(_file.files)

{

_file.value = ""

}

else

{

if (typeof _file != "object")

{

return null

}

var textID=document.getElementById(textID)

textID.value=""

var timestemp = new Date().getTime()

var src=document.getElementById("carPermitDefaultPath").value

var thumb = $('img#'+imgID)

var litbox = $('a#'+hrefID)

thumb.attr('src',"/groupware/images/PdfSample.png")

thumb.attr('style', 'width:230pxheight:240pxborder:0pxvertical-align:middlecursor:pointer' ).hide().fadeIn('slow')

litbox.attr('href',"/groupware/images/PdfSample.png"+'?'+timestemp)

$('.pdfImg').remove()

litbox.show()

lightbox.refresh()

var photoName=document.getElementById(photoName)

photoName.value=null

var imgFont= document.getElementById(imgFont)

imgFont.value = null

}

$("#imgFile").val("")

$("#img1path").val("")

}

html:

<body onload="showImage('insUpdPermitPhoto','imgFont','pfont')>

<div style="margin-top:3pxmargin-bottom:-8px">

<span class="sl-custom-file" style="">

<input type="text" id="img1path" placeholder="対応フォーマット:pdfのみ" readonly="true" class="input-height" style="width:260pxheight:20px"/>

<button class="btn btn-small" id="reference" type="button" style="margin-left:-2pxmargin-top:-12px">

<span style="color:black">参照</span>

</button>

<input type="file" id='insUpdPermitPhoto' class="fileTransIE10 ui-input-file" name="ufile" onChange="getValue(this,'img1path')" />

</span>

<a href="javascript:void(0)" onfocus="this.blur()" onClick="goClearPhoto('img1path','imgFont','pfont','photoName')" class="btn btn-small" style="margin-top:-15px">

<span style="color:black">削除</span>

</a>

</div>

后台用copy方法把图片复制到指定路径就可以了