thinkPHP多表查詢及分頁功能實現方法示例
785
2024-01-10
本文主要從前臺和后臺代碼分析了jquery.form.js實現異步上傳的方法，分享給大家，具體代碼如下
前臺代碼：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="http://www.gimoo.net/t/1904/~/Scripts/jquery-1.7.2.min.js"></script>
<script src="http://www.gimoo.net/t/1904/~/Scripts/jquery.form.js"></script>
<title>upload</title>
</head>
<body>
<form id="fileForm" method="post" enctype="multipart/form-data" action="/upload/upload">
文件名稱：<input name="fileName" type="text"><br />
上傳文件：<input name="myfile" type="file" multiple="multiple"><br />
<input id="submitBtn" type="submit" value="提交">
<img src="http://www.gimoo.net/t/1904/5cad5c3196165.html" alt="my img" id="iceImg" width="300" height="300" style="display: block;" />
</form>
<input type="text" name="height" value="170" />
<input id="sbtn2" type="button" value="提交表單2">
<input type="text" name="userName" value="" />
<script type="text/javascript">
$(function () {
$("#fileForm").ajaxForm({
//定義返回JSON數據，還包括xml和script格式
//clearForm Boolean值屬性，表示是否在表單提交成功后情況表單數據
//dataType 提交成果后返回的數據格式，可選值包括xml，json或者script
//target 服務器返回信息去更新的頁面對象，可以是jquery選擇器字符串或者jquer對象或者DOM對象。
//type 提交類型可以是”GET“或者”POST“
//url 表單提交的路徑
dataType: 'json',
beforeSend: function () {
//表單提交前做表單驗證
$("#myh1").show();
},
success: function (data) {
//提交成功后調用
//alert(data.message);
$("#iceImg").attr('src', '/upload/img/' + data.fileName);
$("#myh1").hide();
//防止重復提交的方法
//1.0 清空表單數據
$('#fileForm').clearForm();
//2.0 禁用提交按鈕
//3.0 跳轉頁面
}
});
$("#myfile").change(function () {
$("#submitBtn").click();
});
$("#iceImg").click(function () {
$("#myfile").click();
});
});
</script>
<h1 id="myh1" style="display: none;">加載中...</h1>
</body>
</html>
后臺代碼：
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IceMvc.Controllers
{
public class UploadController : Controller
{
//
// GET: /Upload/
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Upload()
{
var filesList = Request.Files;
for (int i = 0; i < filesList.Count; i++)
{
var file = filesList[i];
if (file.ContentLength > 0)
{
if (file.ContentLength > 5242880)
{
return Content("<script>alert('注冊失敗!因為您選擇圖片文件不能大于5M.');window.location='/User/Register';</script>");
}
//得到原圖的后綴
string extName = System.IO.Path.GetExtension(file.FileName);
//生成新的名稱
string newName = Guid.NewGuid() + extName;
string imgPath = Server.MapPath("/upload/img/") + newName;
if (file.ContentType.Contains("image/"))
{
using (Image img = Image.FromStream(file.InputStream))
{
img.Save(imgPath);
}
var obj = new { fileName = newName };
return Json(obj);
}
else
{
//return Content("<script>alert('注冊失敗!因為您未選擇圖片文件.');window.location='/User/Register';</script>");
}
}
}
return Content("");
}
public ActionResult Afupload()
{
return View();
}
}
}
以上就是針對jquery.form.js實現異步上傳的方法，希望對大家的學習有所幫助。
