使用jQuery插件uploadPreview实现图片上传和validate表单验证实例详解

时间：2023-03-30 15:59:22 CSS

首先介绍一下我之前遇到的问题。传统的图片上传，展示，防止网页跳转，大佬们都懂，这里我只是想简单的写一下我的经验。仅供初学者参考。介绍完jquery，介绍完下面的js，下面简单介绍一下，后面有详细说明：//这是一个插件用于图片显示//这是一个防止表单提交跳转的插件//这是表单提交html代码：图片大小不超过2M，支持png、jpg、bmp格式。

//这是上传图片的输入框，可以更改侧边样式隐藏在需要点击上传的地方

上传图片jscode:$("#Codeinput").uploadPreview({//这是图片上传的代码img:"codeImg",//保留显示img的idImgType:["jpg","bmp","png"],//图片的格式Callback:function(){//显示成功后的回调函数}});$(".medio-btn").click(function(){//点击执行函数initValidate()//点击执行函数})//初始化表单验证函数initValidate(){if($('#Codeinput').val()==''){//判断是否有图片在输入框中alert("PleaseuploadPicture")}else{$('#CodeId').ajaxSubmit({success:function(data){//上传成功的回调函数if(data.success){//判断后台返回值alert("上传成功")}else{alert("上传失败")}}});}}其他设置示例图片如下1.有一张默认图片2.点击上传图片按钮，选择其中一张3.打开4.点击点击上传图片成功五、其他注意事项1、设置图片的宽高等参数，请参考其他网站2、也可以限制上传图片的大小，比如设置2M以下，下次截图仅供参考3.或者有其他参数的验证类似这样。4、关于具体详细参数的一些问题，请参考其他网站。6.说明请大家提出意见，我会一一解答，谢谢。