How to create Jquery FileUpload with ASP.NET C# included CRUD (not MVC)

Question

Hi I have saw a lot of documents on the google search and found many pages to discuss php / python (like jQuery File Upload Demo) etc.. However I didn't see anything about ASP.NET for C# or VB(not MVC),so anyone can help me to give me any slim clue, Hopefully give me full example code or reference URL that it is included CRUD, by the way I will be continuing search and try to deal with this issue

Ps: CRUD means to create/read/update/delete

I have tried this sample but I had get some error messages as following pictures

Console

NetWork

Solution 1

I have found my question and I've tried to fix my problem as following steps.
1. To modify url at the main.js

$(function () { 
    'use strict';
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        url: 'server/******/'   // to your cs location
    });

2.To check all Css and JQuery that are address is okay to get script

Solution 2

Let's establish a common understanding.

• CRUD = create read update delete
• jquery fileupload -> file upload

Not sure what kind of CRUD operation do you require from jquery fileupload. Can you elaborate further on your requirement?

If you want some reference on how to use the plugin, perhaps this tutorial here - aspnet web form and jquery file upload will help.

Hope this helps.

Solution 3

You can use this code for C# ASP.NET

JS Function

function SaveFiles() {

        var fileInput = document.getElementById('fileInput');
        var file = $("#fileInput").val();

        if (file.length > 0) {
            var fd = new FormData();
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/Admin/UploadImage');
            xhr.setRequestHeader('Content-type', 'multipart/form-data');

            //Appending file information in Http headers
            xhr.setRequestHeader('X-File-Name', fileInput.files[0].name);
            xhr.setRequestHeader('X-File-Type', fileInput.files[0].type);
            xhr.setRequestHeader('X-File-Size', fileInput.files[0].size);
            xhr.setRequestHeader['X-File-FileName', 1];
            xhr.setRequestHeader['X-File-Id', id];

            //Sending file in XMLHttpRequest
            xhr.send(fileInput.files[0]);
            xhr.onreadystatechange = function (data) {

                if (xhr.readyState == 4 && xhr.status == 200) {

                    alert("Image Uploaded Successfully...");

                }
            }
        }
    }

C# Code

public JsonResult UploadImage()
        {
            string fileName = Request.Headers["X-File-Name"];
            string fileType = Request.Headers["X-File-Type"];
            int fileSize = Convert.ToInt32(Request.Headers["X-File-Size"]);

            System.IO.Stream fileContent = Request.InputStream;
            System.IO.FileStream fileStream = System.IO.File.Create(Server.MapPath("~/UploadImg/" + fileName));
            fileContent.Seek(0, System.IO.SeekOrigin.Begin);

            //Copying file's content to FileStream
            fileContent.CopyTo(fileStream);
            fileStream.Dispose();

            string FileName = Server.MapPath("~/UploadImg/" + fileName);

            //Here you can code for insert in database

            return Json(FileName);
        }