Ajax对Form表单图片的局部上传

4 篇文章 0 订阅

首先引入jquery.form.js

1.创建一个form表单(("~/Content/productPic/")是保存图片的路径)

@using(Html.BeginForm("UploadIcon","FlowChartForm",FormMethod.Post,new     {ID="uploadpic",enctype="multipart/form-data"}))

{

<input type="file" name="imgfile" οnchange="$('#uploadpic').submit();" style="width:200px;"/><br/>

<img id="imgicon" src="@(Url.Content("~/Content/productPic/")+ViewData["picName"])" style="display:none;width:80px;height:60px;"/>

@Html.Hidden("iconurl",ViewData["picName"]);

}

2.使用ajax提交图片(进行ajaxt提交的方法)

$(function(){

$('uploadpic').ajaxForm({

success:function(data){

var data=jQuery.parseJSON(data);

if(data!=undefined&&data!=null){

if(data.msg==0){

alert("请上传图片!");

return;

}else if(data.msg==-1){

alert("文件格式不正确!");

return;

}else if(data.mag==-2){

alert("上传图片不能超过3M!");

return;

}else if(data.msg==-3){

alert("出现异常,请稍后再试")!\

return;

}else{

//如果你上传到的是本地可以这样写

//var path="@Url.Content("../Content/productPic")"+data.msg;

//$("#imgicon").attr("src",path);

//$("#imgicon").show();

downpic(data.msg);

}

}

}

})

});

function downpic(msg){

         var

Thymeleaf可以通过form表单提交数据到后台的方式与普通的HTML表单类似。在Thymeleaf中,可以使用th:action属性指定表单提交的URL,使用th:object属性指定表单数据的对象。例如,在一个登录表单中,可以使用th:field属性指定表单字段与后台对象的绑定关系。\[2\] 在Thymeleaf中,form表单的提交方式默认是GET,如果需要使用POST方式提交,可以在form标签中添加method="post"属性。\[3\]同时,需要注意的是,Thymeleaf本身不会刷新页面,如果需要实现局部刷新,可以配合使用Ajax来实现。\[1\] 下面是一个使用Thymeleaf的form表单上传的示例代码: ```html <form method="post" th:action="@{/upload}" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="上传" /> </form> ``` 在这个示例中,form表单的method属性被设置为"post",th:action属性指定了表单提交的URL为"/upload"。enctype属性被设置为"multipart/form-data",以支持文件上传。用户可以选择一个文件并点击"上传"按钮来提交表单。\[2\] #### 引用[.reference_title] - *1* *3* [form表单与thymeleaf入门](https://blog.csdn.net/qq_73917015/article/details/130909134)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [自学 使用thymeleaf提交form表单给controller(springboot)](https://blog.csdn.net/qq_46540738/article/details/117536036)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值