Công cụ bảo vệ mã nguồn .NET mạnh nhất, không thể unpack, miễn phí cho các khách hàng đầu tiên đăng ký.
Từ 1 tới 9 trên tổng số 9 kết quả

Đề tài: Upload file dùng Ajax mà ko dùng Method Post của Form như thế nào?

  1. #1
    Ngày gia nhập
    11 2013
    Bài viết
    37

    Mặc định Upload file dùng Ajax mà ko dùng Method Post của Form như thế nào?

    Mình đang làm về ASP.NET. mô hình MVC 3. có 1 vấn đề mình chưa giải quyết đc là Upload file.
    Mình muốn dùng thẻ html là
    <input type="file"/>
    để upload 1 file ảnh.
    rồi mình sẽ dùng Ajax để gọi đến 1 ActionResult trong Controler. nhưng làm sao để mình truyền đc cái ảnh mà mình vừa chọn ở thẻ html trên?
    Mình xem trên mạng mà toàn thấy sử dụng Method Post của form. Nếu ko dùng Method Post thì có được không? mong mọi người giúp đỡ.
    Mình cảm ơn.
    Công cụ bảo vệ mã nguồn .NET mạnh nhất hiện tại, miễn phí cho các khách hàng đầu tiên đăng ký.

  2. #2
    Ngày gia nhập
    10 2013
    Nơi ở
    Trên nóc nhà
    Bài viết
    132

    HTML Code:
    1. <input id="inputFile" type="file"/>
    JavaScript Code:
    1. var file = document.getElementById('inputFile').files[0];
    2. var formData = new FormData();
    3. formData.append(file.name, file);
    4.  
    5. // Cái bạn cần send lên là formData

  3. #3
    Ngày gia nhập
    11 2013
    Bài viết
    37

    Trích dẫn Nguyên bản được gửi bởi nam.phong Xem bài viết
    HTML Code:
    1. <input id="inputFile" type="file"/>
    JavaScript Code:
    1. var file = document.getElementById('inputFile').files[0];
    2. var formData = new FormData();
    3. formData.append(file.name, file);
    4.  
    5. // Cái bạn cần send lên là formData
    Mình cũng đã thử cách này. nhưng mình ko khi mình truyền vào trong controler thì nó ko nhận.
    var file_data = document.getElementById('fuIcon').files[0];
    var form_data = new FormData();
    form_data.append(file_data.name, file_data)
    var title = $("#txtTitle").val();
    var pageName = $("#txtPageName").val();
    var icon = $("#fuIcon").val();
    var status = $("#cboStatus").val();
    var parent = $("#cboParent").val();
    $.ajax({
    url: '@Url.Action("InsertMenu")',
    data: { "sTitle": title, "sPageName": pageName, "sIcon": icon, "iStatus": status, "iParent": parent},
    success: function (data) {
    //$("#divTreeView").html(data);
    alert("Thêm Menu Thành công");
    }
    });
    Trong Controler mình có
    Function InsertMenu(ByVal sTitle As String, ByVal sPageName As String, ByVal sIcon As String, ByVal iStatus As Integer, ByVal iParent As Integer) As ActionResult
    nếu mình dùng thêm tham số formData mình gán thêm thì nó ko nhận. ko chạy vào trong controler của mình luôn. vậy mình phải sửa thế nào để hàm InsertMenu nó chạy đc. và nhận đc file mà mình truyền vào.
    Mình dùng VB.NET.
    Mong bạn cùng mọi người chỉ giúp. mình cảm ơn

  4. #4
    Ngày gia nhập
    10 2013
    Nơi ở
    Trên nóc nhà
    Bài viết
    132

    Visual C# Code:
    1. HttpPostedFileBase

  5. #5
    Ngày gia nhập
    01 2010
    Bài viết
    306

    Bạn tạo cái form_data xong lại rất là vô tư để đó cho zui, ko submit lên thì làm sao Action Method nhận được ?

    Bạn nên dùng hàm form_data.append() để add hết tất cả những trường như icon, status vào form_data. Lúc gọi ajax thì gửi cái form_data này lên

    Để kiểm tra xem Action method nhận được hay chưa, bạn có thể chạy Debug, kiểm tra trong Request.Files


    Nếu InsertMenu ko hề được gọi thì nhiều khả năng mã javascript của bạn sai. Bạn thử check lại xem thao tác click để phát sinh ajax của bạn đúng ko ? Có chạy đến được dòng lệnh $.ajax({ ko ? Kiểm tra bằng cách thêm các lệnh alert() vào chẳng hạn. Dùng firebug để kiểm tra xem có thao tác post gửi lên server ko, nếu có thì post đến địa chỉ nào
    Đã được chỉnh sửa lần cuối bởi Sounj : 02-12-2013 lúc 06:53 PM.

  6. #6
    Ngày gia nhập
    11 2013
    Bài viết
    37

    Mặc định Upload file dùng Ajax mà ko dùng Method Post của Form như thế nào?

    Trích dẫn Nguyên bản được gửi bởi Sounj Xem bài viết
    Bạn tạo cái form_data xong lại rất là vô tư để đó cho zui, ko submit lên thì làm sao Action Method nhận được ?

    Bạn nên dùng hàm form_data.append() để add hết tất cả những trường như icon, status vào form_data. Lúc gọi ajax thì gửi cái form_data này lên

    Để kiểm tra xem Action method nhận được hay chưa, bạn có thể chạy Debug, kiểm tra trong Request.Files


    Nếu InsertMenu ko hề được gọi thì nhiều khả năng mã javascript của bạn sai. Bạn thử check lại xem thao tác click để phát sinh ajax của bạn đúng ko ? Có chạy đến được dòng lệnh $.ajax({ ko ? Kiểm tra bằng cách thêm các lệnh alert() vào chẳng hạn. Dùng firebug để kiểm tra xem có thao tác post gửi lên server ko, nếu có thì post đến địa chỉ nào
    Ko bạn ơi. mình đã đưa nó dùng HttpPostFileBase rồi.
    Mình đã làm là:
    Code:
    Function InsertMenu(ByVal sTitle As String, ByVal sPageName As String, ByVal sIcon As String, ByVal iStatus As Integer, ByVal iParent As Integer,ByVal fuIcon As HttpPostFileBase) As ActionResult
    Và ở bên client mình đã đặt là.
    Code:
    $.ajax({
    url: '@Url.Action("InsertMenu")',
    data: { "sTitle": title, "sPageName": pageName, "sIcon": icon, "iStatus": status, "iParent": parent,"fuIcon":form_data},
    success: function (data) {
    alert("Thêm Menu Thành công");
    }
    Cơ mà nó ko nhận. Mình thử đặt Debug thì thấy nó chạy qua chỗ lấy file rồi. qua cả chỗ truyền Data. nhưng nó ko chạy vào debug bên controler. Nếu mình làm như vậy có cần sử dụng là
    Code:
    <HttpPost()>
    Function InsertMenu(ByVal sTitle As String, ByVal sPageName As String, ByVal sIcon As String, ByVal iStatus As Integer, ByVal iParent As Integer,ByVal fuIcon As HttpPostFileBase) As ActionResult
    NẾu sử dụng như vậy. thì mình có thể dùng 1 client click mà ko cần phải sử dụng đến Submit ko? Mong mọi người giúp đỡ. Mình cảm ơn.
    Đã được chỉnh sửa lần cuối bởi hieupxd2cntt : 02-12-2013 lúc 08:24 PM.

  7. #7
    Ngày gia nhập
    01 2010
    Bài viết
    306

    Thực tình đúng là bó tay cậu. Tui nói là đưa nó vào form_data tức là dùng hàm form_data.append ấy, chứ ko phải cái mớ này
    Code:
    data: { "sTitle": title, "sPageName": pageName, "sIcon": icon, "iStatus": status, "iParent": parent,"fuIcon":form_data},
    Giải thích ko thông, cuối cũng cũng đành phải mở cái pj mới, google seach rồi làm đại 1 cái demo

    JavaScript Code:
    1.     <input type="text" name="name" id="name" /><br />
    2.     <input type="text" name="address" id="address" /><br />
    3.     <input type="file" name="fuIcon" id="fuIcon" /><br />
    4.     <input type="button" id="ok" value="ok" /><br />
    5.     <script>
    6.         $(function () {
    7.             $("#ok").click(function () {
    8.                 var file_data = document.getElementById('fuIcon').files[0];
    9.                 if (file_data == null) return; // chưa chọn file
    10.                 var form_data = new FormData();
    11.                 form_data.append("fuIcon", file_data)
    12.                 form_data.append("address", $("#address").val());
    13.                 form_data.append("name", $("#name").val());
    14.                 //alert(form_data);
    15.                 $.ajax({
    16.                     url: '/Page.aspx',
    17.                     data: form_data,
    18.                     processData: false,
    19.                     contentType: false,
    20.                     type: 'POST',
    21.                     success: function (data) {
    22.                         //$("#divTreeView").html(data);
    23.                         alert("Thêm Menu Thành công");
    24.                     }
    25.                 });
    26.             });
    27.         });
    28.     </script>

    Chịu khó google đi, vào mấy trang tiếng anh ấy

  8. #8
    Ngày gia nhập
    11 2013
    Bài viết
    37

    Cảm ơn bạn nhiều lắm. Mình làm đc rồi. Mình vào google cả buổi chiều mà ko đc.

  9. #9
    Ngày gia nhập
    03 2008
    Bài viết
    2

    Trích dẫn Nguyên bản được gửi bởi Sounj Xem bài viết
    Thực tình đúng là bó tay cậu. Tui nói là đưa nó vào form_data tức là dùng hàm form_data.append ấy, chứ ko phải cái mớ này
    Code:
    data: { "sTitle": title, "sPageName": pageName, "sIcon": icon, "iStatus": status, "iParent": parent,"fuIcon":form_data},
    Giải thích ko thông, cuối cũng cũng đành phải mở cái pj mới, google seach rồi làm đại 1 cái demo

    JavaScript Code:
    1.     <input type="text" name="name" id="name" /><br />
    2.     <input type="text" name="address" id="address" /><br />
    3.     <input type="file" name="fuIcon" id="fuIcon" /><br />
    4.     <input type="button" id="ok" value="ok" /><br />
    5.     <script>
    6.         $(function () {
    7.             $("#ok").click(function () {
    8.                 var file_data = document.getElementById('fuIcon').files[0];
    9.                 if (file_data == null) return; // chưa chọn file
    10.                 var form_data = new FormData();
    11.                 form_data.append("fuIcon", file_data)
    12.                 form_data.append("address", $("#address").val());
    13.                 form_data.append("name", $("#name").val());
    14.                 //alert(form_data);
    15.                 $.ajax({
    16.                     url: '/Page.aspx',
    17.                     data: form_data,
    18.                     processData: false,
    19.                     contentType: false,
    20.                     type: 'POST',
    21.                     success: function (data) {
    22.                         //$("#divTreeView").html(data);
    23.                         alert("Thêm Menu Thành công");
    24.                     }
    25.                 });
    26.             });
    27.         });
    28.     </script>

    Chịu khó google đi, vào mấy trang tiếng anh ấy
    Thanks bạn nhiều
    Công cụ bảo vệ mã nguồn .NET mạnh nhất hiện tại, miễn phí cho các khách hàng đầu tiên đăng ký.

Các đề tài tương tự

  1. Dùng Ajax lấy dữ liệu từ SOAP web service như thế nào?
    Gửi bởi quangvietntd trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 0
    Bài viết cuối: 22-10-2012, 09:59 AM
  2. Giới thiệu diễn đàn post bài tích điểm, dùng điểm đổi thành thẻ mua hàng
    Gửi bởi nguoibanhang trong diễn đàn Giới thiệu website, sản phẩm của bạn
    Trả lời: 0
    Bài viết cuối: 17-11-2011, 06:46 AM
  3. Socket POST dữ liệu kiểu multipart/form-data dùng Httpwebrequest sau đăng nhập
    Gửi bởi lytrongkhoa trong diễn đàn Thắc mắc lập trình C#
    Trả lời: 0
    Bài viết cuối: 29-09-2011, 09:55 AM
  4. File server để dùng ajax trong visual2010 là file gì, xử lý kết nối với SQLserver như thế nào?
    Gửi bởi lenamshenlong trong diễn đàn Thắc mắc lập trình ASP.NET
    Trả lời: 9
    Bài viết cuối: 26-05-2011, 05:14 PM
  5. Xử lý Upload File với UpdatePanel (AJAX Enabled) và MultiView
    Gửi bởi davidhuynhvan trong diễn đàn Tutorials và Thủ thuật lập trình C#, ASP.NET
    Trả lời: 4
    Bài viết cuối: 27-01-2011, 02:53 PM

Quyền hạn của bạn

  • Bạn không thể gửi đề tài mới
  • Bạn không thể gửi bài trả lời
  • Bạn không thể gửi các đính kèm
  • Bạn không thể chỉnh sửa bài viết của bạn