jQuery plug-in ajaxFileUpload
- 高洛峰Original
- 2016-12-12 17:29:271594browse
ajaxFileUpload.js There are many names with the same name, because it is easy to make one.
I use this: https://github.com/carlcarl/AjaxFileUpload
The download address is here: http://files.cnblogs.com/files/kissdodog/ajaxfileupload_JS_File.rar
AjaxFileUpload.js is not A very famous plug-in, it is just written by others and released for everyone to use. The principle is to create hidden forms and iframes and then use JS to submit them and get the return value.
I originally made an asynchronous upload function and chose it because its configuration method is more like jQuery's AJAX, which I like very much.
What’s said in the comments doesn’t work. That's because we are not using the same js. I searched AjaxFileUpload on github and found a lot of similar js.
ajaxFileUpload is a jQuery plug-in for asynchronous file upload
Upload a version you don’t know, so you don’t have to look for it everywhere in the future.
Syntax: $.ajaxFileUpload([options])
Options parameter description:
1, url Upload handler address.
2, fileElementId The ID of the file field that needs to be uploaded, that is, the ID of 3525558f8f338d4ea90ebf22e5cde2bc.
3, secureuri Whether to enable secure submission, the default is false.
4, dataType The data type returned by the server. Can be xml, script, json, html. If you don't fill it in, jQuery will automatically determine it.
5, success It is a processing function that is automatically executed after successful submission. The parameter data is the data returned by the server.
6, error Handling function that is automatically executed when submission fails.
7, data Custom parameters. This thing is more useful. When there is data related to the uploaded image, this thing will be used.
8, type Error prompt:
1, SyntaxError: missing; before statement error
If this error occurs, you need to check whether the url path is accessible2, SyntaxError: syntax error
If this error occurs, you need to check whether there is a syntax error in the server background handler that handles the submission operation
3, SyntaxError: invalid property id error
If this error occurs, you need to check whether the text field property ID exists
4 , SyntaxError: missing } in XML expression error
If this error occurs, you need to check whether the file name is consistent or does not exist
5, other custom errors
You can use the variable $error to print directly to check whether each parameter is correct. Compared with The above invalid error prompts are still much more convenient.
Usage:
Step 1: First introduce the jQuery and ajaxFileUpload plug-ins. Pay attention to the order. Needless to say, this is true for all plug-ins.
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>Step 2: HTML code:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>Step 3: JS code
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="ajaxfileupload.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":button").click(function () {
ajaxFileUpload();
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
url: '/upload.aspx', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'file1', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数
{
$("#img1").attr("src", data.imgurl);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
error: function (data, status, e)//服务器响应失败处理函数
{
alert(e);
}
}
)
return false;
}
</script>Step 4: Backend page upload.aspx code:
protected void Page_Load(object sender, EventArgs e)
{
HttpFileCollection files = Request.Files;
string msg = string.Empty;
string error = string.Empty;
string imgurl;
if (files.Count > 0)
{
files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
msg = " 成功! 文件大小为:" + files[0].ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}Let’s take an example of the MVC version:
Controller code
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
return Content(imgPath);
}
} Front-end view, HTML and JS code, after successful upload, return the real address of the image and bind it to the SRC address of a1f02c36ba31691bcfe87b2722de723b
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>
Finally, here is an example of uploading an image with parameters: Controller code:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Upload()
{
NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;
HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
string imgPath = "";
if (hfc.Count > 0)
{
imgPath = "/testUpload" + hfc[0].FileName;
string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
}
//注意要写好后面的第二第三个参数
return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}Index View code:
<body>
<p><input type="file" id="file1" name="file" /></p>
<input type="button" value="上传" />
<p><img id="img1" alt="上传成功啦" src="" /></p>
</body>