Article From:https://www.cnblogs.com/yuanxinSix/p/9122913.html

bootstrap-fileinputThe document is as follows:

1.Citing these three files in the project, I use BundleConfig here, and you have the same access effect according to the path.

2.Write the input element

 <input type=”file” name=”img” id=”img” class=”file-loading” multiple=””/>

For example, I am here,

 <div class="form-group">
                    <div class="col-md-3">
                        <div class="label-wrapper">
                            @Html.LabelFor(model => model.ProductImgLink, new { @class = "control-label" })
                            <div class="ico-help">
                                <i class="fa fa-question-circle"></i>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        @Html.HiddenFor(model => model.ProductImgLink)
                       <input type="file" name="img" id="img" class="file-loading" multiple=""/>
                        @Html.ValidationMessageFor(model => model.ProductImgLink)
                    </div>
                </div>

3.Loading plugin plugin I encapsulate jQuery plug-in to facilitate the same calls elsewhere.

jQuery.extend({
UploadImg: function ($control, $input, uploadUrl, customOption) {
        var option = {
            language: 'zh', //Setting language
            uploadUrl: uploadUrl, //The uploaded address
            allowedFileExtensions: ['jpg', 'gif', 'png'], //Received file suffix
            showUpload: true, //Whether the upload button is displayed
            showCaption: false, //Whether the title is displayed
            browseClass: "btn btn-primary", //Button style
            dropZoneEnabled: false,
            //dropZoneEnabled: false,//Whether the drag and drop area is displayed//minImageWidth: 50, //Minimum width of a picture//minImageHeight: 50,//The minimum height of a picture//maxImageWidth: 1000,//The maximum width of the picture//maxImageHeight: 1000,//The maximum height of the picture
            maxFileSize: 0,//The unit is KB, if 0, it does not restrict the size of the file.
            minFileCount: 1,
            maxFileCount: 10, //Represents the maximum number of files allowed to upload at the same time
            enctype: 'multipart/form-data',
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "Select the number of uploaded files ({n}) exceeding the maximum allowable value {m}!",
        };
        if (customOption != null && customOption != undefined) {
            $.extend(option, customOption);
        }
        //Initializing the style of the upload control
        $control.fileinput(option);
        //Before uploading
        $control.on('filepreupload', function (event, data, previewId, index) {

        });
        //Events after importing the file to be uploaded
        $control.on("fileuploaded", function (event, data, previewId, index) {
            if (data.response.ResultType === 0) {
                $input.val(data.response.Message);
            }
            else {
                toastr.error(data.response.Message);
            }
        });
        //Asynchronous upload error result processing
        $control.on("fileerror", function (event, data, msg) {
            toastr.error("Network error, please resubmit");
        });
        //Synchronization upload success result processing
        $control.on('filebatchuploadsuccess', function (event, data, previewId, index) {
            if (data.response.ResultType === 0) {
                $input.val(data.response.Message);
            }
            else {
                toastr.error(data.response.Message);
            }
        });
        //Synchronization upload error result processing
        $control.on('filebatchuploaderror', function (event, data, msg) {
            toastr.error("Network error, please resubmit");
        });
        //Remove the button event
        $control.on("filecleared", function (event, data, msg) {
            $input.val('');
        });
    }
});

3.Add the plug-in method here the #img element is the HTML element bound to the upload plug-in, #ProductImgLink is the name of the back file after the background method is successfully saved and used to save the data

   $.UploadImg($("#img"), $("#ProductImgLink"), actionUrl, null);

4.Background file method

/// <summary>
        /// Upload pictures to the folder of the management system/// </summary>
        /// <param name="name">Folder name</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult UploadFiles(string name)
        {
            var files = Request.Files;
            if (files != null && files.Count > 0)
            {
                StringBuilder fileNames=new StringBuilder();
                for (int i = 0; i < files.Count; i++)
                {
                    var file = files[i];
                    string fileName = DateTime.Now.ToString("yyyyMMddHHmmssffff") + file.FileName;
                    string path = Server.MapPath("~/Areas/Admin/Content/admin/adminImg" + name);
                    if (!Directory.Exists(path)) Directory.CreateDirectory(path);
                    string filePath = path + "/" + fileName;
                    file.SaveAs(filePath);
                    fileNames.AppendFormat(name+"/"+ fileName + ";");
                }
               
                fileNames = fileNames.Remove(fileNames.Length - 1, 1);
                return Json(new OperationResult(OperationResultType.Success, fileNames.ToString()));
            }
            return Json(new OperationResult(OperationResultType.Error, "Upload failure"));
        }

I used a lot of methods to save files. For example, you add a number of pictures to the page, click upload, and pass them all to the backstage. This method only applies to the synchronization uploading files, so when you initialize the plug-in, you also need to set up (use synchronization, multiple pictures can only be called once. “Background method, using asynchronous multiple images will call the background method many times.

  var option = {
            uploadAsync: false,
        };
$.UploadImg($("#img"), $("#ProductImgLink"), actionUrl, option);

Expansion: when you edit, load the saved pictures, preview the pictures, and use the parameters: initialPreview

  var imgArry = new Array();
 imgArry.push('<img  src="The path of file preservation is "style=" width:auto; height:auto; max-width:100%; max-height:100%; "class=" file-preview-image kV.-preview-data rotate-1 "/>");
var option = { initialPreview: imgArry, };

 

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *