bootstrap-fileinput 圖片上傳

標籤：name   img   link   函數   initial   gif   log   orm   handle   

bootstrap-fileinput 源檔案 在網上下載

 

CSS:

 <link href="../../static/Bootstrap/css/plugins/bootstrap-fileinput/fileinput.min.css" rel="stylesheet" />

JS:

<script src="../../static/Bootstrap/js/plugins/bootstrap-fileinput/fileinput.min.js"></script>
<script src="../../static/Bootstrap/js/plugins/bootstrap-fileinput/fileinput_locale_zh.js"></script>

HTML代碼：

  <form enctype="multipart/form-data">                    <div class="row" style="height: 500px">                        <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1">                    </div>                </form>

 

//上傳    
   $("#file-1").fileinput({            uploadUrl: ‘/Handler/upload.ashx‘, // 圖片上傳URL            allowedFileExtensions: [‘jpg‘, ‘png‘, ‘gif‘],            overwriteInitial: false,            maxFileSize: 1000,            maxFilesNum: 10,            allowedFileTypes: [‘image‘, ‘video‘, ‘flash‘],            slugCallback: function (filename) {                return filename.replace(‘(‘, ‘_‘).replace(‘]‘, ‘_‘);            }        });

   //回呼函數 當上次成功之後 返回   $("#file-1").on("fileuploaded", function(event, data, previewId, index) {
                   alert(data.response.JsMessage)

 })

upload.ashx 一般處理常式，返回json 格式：

context.Response.Write(JsonConvert.SerializeObject(new { success = true, JsCode = 1, JsMessage = "返回的資訊" }));

 

 

bootstrap-fileinput 圖片上傳