Jquery+ajax simple implementation of File upload method _jquery

The example of this paper describes the simple implementation of Jquery+ajax file upload method. Share to everyone for your reference, specific as follows:

You can submit a form via Ajax without refreshing the page. The main methods used are $ ("#formID"). Ajaxsubmit () method .

1, to introduce JS plug-in

Attachments to download: jquery.form.js

2, page code:

<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> photo </td>
<td>
<div id= "str" >
</ div>
<p style= "display:none;" id= "Timgurl" ></p>
<p style= "color:red" id= "Timgok" > </p>
</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 ("File upload succeeded"),
else {
$ (' #timgok '). html ("File upload failed") ;
}
,
error:function (msg) {
alert ("File upload Failed");}
)
; return false;
});
$ ("#_fileForm"). Submit ();

Controller Code:

[HttpPost]
Public ActionResult Uploadhelper ()
{
//start uploading
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);

More interested readers of jquery-related content can view the site: The summary of AJAX usage in jquery, the summary of jquery switching effects and techniques, the summary of jquery drag-and-drop effects and techniques, the summary of jquery extension techniques, jquery Common Classic Effects Summary "jquery animation and special effects usage Summary", "jquery selector usage Summary" and "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.