Note the point:
The name attribute must be used as the file field (<input type= "File" >), and if there is no Name attribute, the server is not getting the picture after uploading. such as: The correct wording is <input type= "file" id= "File1" name= "File1"/>
The datatype parameter must be capitalized. such as: dataType: ' HTML '.
Html
<body> <p><input type="file"Id="file1"Name="file"/></p> <input type="Button"Value="Upload"/> <p>"IMG1"alt="The upload was successful."Src=""/></p></body>
Js
<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 uploadsSecureuri:false,//whether a security protocol is required, generally set to falseFileelementid:'file1',//ID of the file upload domainDataType:'JSON',//The return value type is generally set to JSONSuccess:function (data, status)//Server Success Response handler function { $("#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 handler function{alert (e); } } ) return false; } </script>
Background
protected voidPage_Load (Objectsender, EventArgs e) {httpfilecollection Files=Request.Files; stringmsg =string. Empty; stringError =string. Empty; stringImgurl; if(Files. Count >0) {files[0]. SaveAs (Server.MapPath ("/") + System.IO.Path.GetFileName (files[0]. FileName)); Msg="Success! File size is:"+ files[0]. ContentLength; Imgurl="/"+ files[0]. FileName; stringres ="{error: '"+ Error +"', msg: '"+ msg +"', Imgurl: '"+ Imgurl +"'}"; Response.Write (RES); Response.End (); } }
Image upload plugin usage, JS syntax "three"