javascript

您所在的位置：网站首页 › jqueryform图片上传 › javascript

javascript

2023-08-19 03:39| 来源: 网络整理| 查看: 265

首先给大家介绍我之前遇到的问题，传统的图片上传、展示和防止网页的跳转，大佬们都懂，但是在这里我想简单的写一下我的经历。仅供小白参考。

引入jquery之后，在引入以下的js，我会简单介绍以下，后续有详细的讲解：

//这是图片展示的插件 //这是防止form提交跳转的插件 //这是表单提交

html代码：

图片大小不超过2M，支持png、jpg、bmp格式。 //这是上传图片的input框，你可以改边样式让其隐藏在你需要点击上传的地方上传图片

js代码：

$("#Codeinput").uploadPreview({//这是图片上传的代码 Img: "codeImg",//预留展示img的id ImgType: ["jpg", "bmp", "png"],//图片的格式 Callback: function() { //成功展示后的回调函数 } }); $(".medio-btn").click(function() {//点击执行的函数 initValidate()//点击执行的函数 }) // 初始化表单验证 function initValidate() { if($('#Codeinput').val() == '') {//判断input框中是否有图片 alert("请上传图片") } else { $('#CodeId').ajaxSubmit({ success: function(data) {//成功上传的回调函数 if(data.success) {//判断后台返回值 alert("上传成功") } else { alert("上传失败") } } }); } }

其他设置事例图片如下

1.有一个默认的图片

2.点击上传图片按钮并选择其中一个

3.打开

4.点击上传图片成功

5. 其他注意事项

1.对图片还进行宽高等其他参数设置，请参考其他网站 2.上传图片也可以进行对大小的限制，比如是2M以下的设置。下次是截图仅供参考

3.或者是这样有其他参数的验证

4.具体的详细参数的一些问题，请参考其他网站。

6. 说明

请大家多多提出意见，我会一一解答，谢谢。

【本文地址】

javascript

javascript

今日新闻

推荐新闻