jquery - I cannot post image in mvc -

jquery - I cannot post image in mvc -

i want create form uploads pictures directory. using ajax want display image uploaded in img tag below cant doit. codes:

ajax codes: function tempupl() { var file = document.getelementbyid("image"); var form = new formdata(); alert(file.files[0].name); form.append("image", file.files[0]); pather = "@url.action("uploadpi","countries")"; $.ajax({ type: "post", url: pather, data: form, processdata: false, contenttype: false, success: function (data) { alert(data); var = data; homecoming a; } }); }

my controller:this controller upload image folder.i returned json objects ajax .

public actionresult uploadpi(httppostedfilebase image) { jsonresult j = new jsonresult(); if (image != null && image.contentlength > 0) { string fullpath = path.combine(server.mappath("~/contents/"), path.getfilename(image.filename)); if (system.io.file.exists(fullpath)) { system.io.file.delete(fullpath); } image.saveas(fullpath); } j.data = path.getfilename(image.filename) homecoming (j); }

my form:this form upload image , has img tag display image uploaded doesnot work.

<form method="post" enctype="multipart/form-data"> @html.antiforgerytoken() @html.validationsummary(true) <fieldset> <legend>pic</legend> <div class="editor-label"> @html.labelfor(model => model.picpath) </div> <div class="editor-field"> @html.editorfor(model => model.picpath) <input type="file" id="image" name="image" /><input type="button" value="upload" onclick="tempupl()" /> </div> <img src="@url.content("a")" alt="" id="pic" name="pic"/>

i cant insert filepath on @url.content in ajax success function .

i not think can post image using ajax , mutual html. if want upload file without refreshing entire page, there 2 ways: [1] using html5 ajax (http://www.sitepoint.com/html5-ajax-file-upload/) [2] using iframe simulate ajax upload file (http://www.alfajango.com/blog/ajax-file-uploads-with-the-iframe-method/)

i hope can help you

jquery html asp.net-mvc