ajaxFileUpload. JS many of the same name, because it’s easy to make one.
I use this:https://github.com/carlcarl/AjaxFileUpload
Download address here:http://xiazai.jb51.net/201701/yuanma/ajaxfileupload(jb51.net).rar
AjaxFileUpload. JS is not a very famous plug-in, but what others have written is put out for everyone. The principle is to create hidden forms and iframes, and then submit them with JS to obtain the return value.
I chose the asynchronous upload function because its configuration is more like jQuery’s Ajax. I like it very much.
What is said in the comments is not good. Because we don’t use the same JS. I searched GitHub for ajaxfileupload and found many similar JS.
Ajaxfileupload is a jQuery plug-in that uploads files asynchronously
Pass on a version you don’t know. You don’t have to look everywhere in the future.
Syntax:$.ajaxFileUpload([options])
Options parameter description:
- 1. URL upload handler address.
- 2. Fileelementid is the ID of the file field to be uploaded, i.e. < input type = “file” > ID.
- 3. Whether secureuri enables secure submission. The default value is false.
- 4. Datatype the data type returned by the server. Can be XML, script, JSON, HTML. If it is not filled in, jQuery will automatically judge.
- 5. The processing function automatically executed after successful submission. The parameter data is the data returned by the server.
- 6. Error is the processing function automatically executed when the submission fails.
- 7. Data custom parameters. This thing is more useful. It will be used when there is data related to the uploaded pictures.
- 8. Type when submitting custom parameters, this parameter should be set to post
Error message:
- 1，SyntaxError: missing ; Before statement error
If this error occurs, you need to check whether the URL path can be accessed - 2. Syntax error: syntax error
If this error occurs, you need to check whether there is a syntax error in the server spooler processing the submission operation - 3. Syntax error: invalid property ID error
If this error occurs, you need to check whether the text field attribute ID exists - 4. Syntax error: 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 customization errors
You can use the variable $error to print directly to check whether the parameters are correct, which is much more convenient than the invalid error prompts above.
usage method:
Step 1: first introduce jQuery and Ajax fileUpload plug-ins. Pay attention to the order. Needless to say, all plug-ins are like this.
<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" name="file" /></p>
< input type = "button" value = "Upload" / >
<p>< img ALT = "upload succeeded" 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 ', // server side request address for file upload
Secureuri: false, // whether a security protocol is required. Generally, it is set to false
Fileelementid: 'file1', // ID of file upload domain
Datatype: 'JSON', // the return value type is generally set to JSON
Success: function (data, status) // the server responds to the processing function successfully
{
$("#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) // server response failure processing function
{
alert(e);
}
}
)
return false;
}
</script>Step 4: upload the background page 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 = "success! The file size is:" + files [0] ContentLength;
imgurl = "/" + files[0].FileName;
string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
Response.Write(res);
Response.End();
}
}Download the complete code of this example
An example of 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 picture and bind it to the SRC address of < img >
<html>
<head>
<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 () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
Alert ("please select a picture");
}
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
URL: '/ home / upload', // server side request address for file upload
Secureuri: false, // generally set to false
Fileelementid: 'file1', // ID attribute of file upload space < input type = "file" name = "file" / >
Datatype: 'HTML', // the return value type is generally set to JSON
Success: function (data, status) // the server responds to the processing function successfully
{
alert(data);
$("#img1").attr("src", data);
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
Error: function (data, status, e) // server response failure processing function
{
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<p><input type="file" name="file" /></p>
< input type = "button" value = "Upload" / >
<p>< img ALT = "upload succeeded" SRC = "" / ></p>
</body>
</html>Finally, another example of uploading pictures 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);
}
//Pay attention to the second and third parameters
return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}Index View Code:
<html>
<head>
<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 () {
if ($("#file1").val().length > 0) {
ajaxFileUpload();
}
else {
Alert ("please select a picture");
}
})
})
function ajaxFileUpload() {
$.ajaxFileUpload
(
{
URL: '/ home / upload', // server side request address for file upload
type: 'post',
Data: {ID: '123', name: 'Lunis'}, // this parameter is very rigorous. You can't write a quotation mark incorrectly
Secureuri: false, // generally set to false
Fileelementid: 'file1', // ID attribute of file upload space < input type = "file" name = "file" / >
Datatype: 'JSON', // the return value type is generally set to JSON
Success: function (data, status) // the server responds to the processing function successfully
{
alert(data);
$("#img1").attr("src", data.imgPath1);
Alert ("the ID you requested is" + data. ID + "" + "the name you requested is:" + data. Name ");
if (typeof (data.error) != 'undefined') {
if (data.error != '') {
alert(data.error);
} else {
alert(data.msg);
}
}
},
Error: function (data, status, e) // server response failure processing function
{
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<p><input type="file" name="file" /></p>
< input type = "button" value = "Upload" / >
<p>< img ALT = "upload succeeded" SRC = "" / ></p>
</body>
</html>This example displays the asynchronous upload of pictures and pops up the parameters of user-defined transmission.Download address of this instance
A problem was found during debugging today, that is, as a file field (< input type = “file” >), it must have a name attribute. If there is no name attribute, the server cannot get the picture after uploading. For example, the correct writing is < input type = “file” name = “file1” / >
The most classic mistake has finally found the reason. Object function (a, b) {return new e.fn.init (a, B, H)} has no method ‘handleerror’. This is an error reported by Google browser. It is very classic. I don’t know whether it is my version problem or a real problem. The root of this problem is found after n uploads. The answer is:The datatype parameter must be capitalized。 For example: datatype: ‘HTML’.
This is about ASP Net to upload files using the ajaxfileupload plug-in. I hope it will be helpful to your study, and I hope you can support developpaer.