locked
image upload jquery mobile in webmatrix RRS feed

  • Question

  • User-932576310 posted

    i try to make upload image using webmatrix and jquery mobile, it`s only can upload image once and redirect to the page i want,

    the problem is : after image uploaded, i can not upload another image, i have to refresh the URL in the browser so i can upload another image.

    i think i have to refresh the form every time after finish upload, but no sure how to do it please advice,

    here the code i try to write :

    @{
        Page.Title = "New Product";
        Layout = "~/_UploadLayout.Mobile.cshtml";
        var db = Database.Open("StarterSite");
        
        WebImage photo = null;
        var newFileName = "";
        var imagePath = "";
        Validation.RequireField("Image","foto tidak boleh kosong");
    
        if (IsPost)
        {
            photo = WebImage.GetImageFromRequest();
            if (photo != null)
            {
                newFileName = Path.GetFileName(photo.FileName);
                imagePath = @"Images\Product\" + newFileName;
    
                photo.Save(@"~\" + imagePath);
            }
    
            var insertimage = "INSERT INTO savedImage (imageUrl,idImgKategori) values (@0,@1)";
            db.Execute(insertimage,newFileName,9);
            Response.Redirect("/adminpage/imagelist");
        }
    }
    
    @section Scripts {
        <script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
        <script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
    }
    <script src="~/Scripts/jquery.form.min.js"></script>
    <script type="text/javascript">
        $(document).on('initpage', function () {
    
            $('#fromNp').contents("refresh");
        });
    
    </script>
    <div data-role="content" id="contentNew">
      
     
    
            <form action="~/adminPage/newProduct" id="fromNp" method="post" enctype="multipart/form-data" data-ajax="false">
                @AntiForgery.GetHtml()
                @Html.ValidationSummary("image is require")
                <div data-role="fieldcontain">
                    <label for="Image">Image :</label>
                    <input type="file" name="Image" @Validation.For("Image") />
                    @Html.ValidationMessage("picture can not empty")
                    <br />
                </div>
                <div class="ui-grid-solo">
                    <input type="submit" value="Upload" id="buttonupl" />
                </div>
            </form>
      
    </div>

    the jquery and j query mobile i put inside

    ~/_UploadLayout.Mobile.cshtml

    thank you 

    Monday, June 17, 2013 1:41 AM

Answers

  • User-837620913 posted

    From this article here is a neat way to refresh the form in jQuery Mobile:

    function refreshPage() {
      $.mobile.changePage(
        window.location.href,
        {
          allowSamePageTransition : true,
          transition              : 'none',
          showLoadMsg             : false,
          reloadPage              : true
        }
      );
    }



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 17, 2013 5:29 AM