jQuery+ajax实现文件上传(附代码)
程序员文章站
2022-04-17 09:13:20
...
这次给大家带来jQuery+ajax实现文件上传(附代码),jQuery+ajax实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下。
主要使用的方法是 $("#formID").ajaxSubmit()方法。
1、要引入js插件
需要下载的附件:jquery.form.js
2、页面代码:
<script src="project/js/jquery.form.js" type="text/javascript"></script> <script src="project/js/fileload.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { createHtml($("#str")); }) </script> <tr> <td>图片</td> <td> <p id="str"> </p> <p style="display: none;" id="timgUrl"></p> <p style="color: red" id="timgok"></p> <img id="backImgUrl" src="@Model.ImageUrl" style="width:300px; height:200px;" /></td> </tr> <script src="~/project/js/jquery.form.js" type="text/javascript"></script> <script src="~/project/js/fileload.js" type="text/javascript"></script>
fileload.js:
function fileloadon() { $("#msg").html(""); $("#_fileForm").submit(function () { $("#_fileForm").ajaxSubmit({ type: "post", url: "/201410CarVideoAdmin/Home/UploadHelper", success: function (data1) { $('#timgUrl').html(data1); var reg = new RegExp('"', "g"); var imageUrl = $('#timgUrl').text().replace(reg, ""); $('#backImgUrl').attr("src", imageUrl); if ($('#timgUrl').html() != null) { $('#timgok').html("文件上传成功"); } else { $('#timgok').html("文件上传失败"); } }, error: function (msg) { alert("文件上传失败"); } }); return false; }); $("#_fileForm").submit(); }
Controller Code:
[HttpPost] public ActionResult UploadHelper() { //开始上传 string imageUrl = string.Empty; QF.WebGamePlatform.Reference.FileUploadService service = new QF.WebGamePlatform.Reference.FileUploadService(); var fileResult = service.PicUpLoad(Request.Files[0]); if (fileResult.Code == 0) { imageUrl = fileResult.Data.RawImageUrl; } return Json(imageUrl, JsonRequestBehavior.AllowGet); }
相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!
推荐阅读:
以上就是jQuery+ajax实现文件上传(附代码)的详细内容,更多请关注其它相关文章!
上一篇: php中的->是什么意思
下一篇: php Session没有效果是因为什么