إذا كنت لا تعرف تكوين bootstrap-fileinput ، فيمكنك التحقق من الموقع الرسمي: http://plugins.krajee.com/file-dpep.
الوصف المنطقي: احصل أولاً على عرض البيانات من الخلفية ، ثم قم بتحريره.
دون مزيد من اللغط ، فقط قم بتحميل الرمز.
1. جزء من رمز الصفحة:
<div> <label for = "inpectemail3"> شعار المشروع </label> <viv> <input id = "testlogo" type = "file" name = "icofile"/> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addfile (this)"
ملاحظة: عند الحاجة إلى OnChange () من قبل عملي ، وسيتم تنفيذ حدث إضافة تلقائيًا بعد اكتمال التحميل. يمكن إزالة هذه الطريقة.
2. احصل على طريقة بيانات التهيئة:
// تهيئة للحصول على الملف الأصلي $ (function () {$ .ajax ({type: "post" ، url: "/eim/project/testfileupload.do" ، datatype: "json" ، success: function (data) {layer.msg ('' station lust! ') ؛ errorthrown) {layer.msg ('failting!') ؛الوصف: هنا أعيد صفيف كائن: قائمة <MemberUser> ، والتي يمكن فهمها على أنها الحصول على جميع الطلاب في الفصل وعرض الآلهة
3. تهيئة مكون bootstrap-fileinput:
دالة showphotos (djson) {// إرجاع سلسلة JSON إلى كائن JSON في الخلفية var redata = eval (djson) ؛ // معاينة الصورة JSON Data Group var prelist = new array () ؛ لـ (var i = 0 ؛ i <redata.length ؛ i ++) {var array_element = redata [i] ؛ ) fa-file-text-o text-info '> </i> </span> </viv> </viv> "} آخر {// نوع الصورة المسبق [i] =" <img src =/"/eim/upload/getimg.do؟ class =/"file-preview-image/"> "؛ }} var previewJson = prelist ؛ // بيانات التكوين المقابلة لمجموعة بيانات JSON لصورة المعاينة أعلاه var preconfiglist = new array () ؛ لـ (var i = 0 ؛ i <redata.length ؛ i ++) {var array_element = redata [i] ؛ var tjson = {caption: array_element.fileIdfile.Filename ، // عرض اسم الملف المعروض: '120px' ، url: '/eim/project/deletefile.do' ، // erl url key: array_element.id ، // delete is the parmeter by a jox to beathy: preconfiglist [i] = tjson ؛ } // Query المعلمات المحددة بنفسك. showpreview: true ، showcancel: true ، dropzoneenabled: false ، maxfileCount: 10 ، initialPreviewShowDelete: true ، msgfilestoomany: "حدد عدد الملفات التي تم تحميلها تتجاوز القيمة القصوى المسموح بها!" المعاينة FileIconsettings: {'docx': '<i> </i>' ، 'xlsx': '<i> </i>' ، 'pptx': '<i> </i>' ، 'pdf': '<i> </i>' ، 'zip': '<i> </i> ،' sql ':' <i> ، initialPreviewConfig: preconfiglist}). Off ('filepreupload'). on ('filepreupload' ، function () {// alert (data.url) ؛}). على ("fileuploaded" ، وظيفة (حدث ، outsata) Outsata.Response.id ؛ }4. الخلفية Java يحفظ جزءًا من رمز الملف
requestmapping (value = "/uploadfile" ، method = requestMethod.post) recponsebody public exploadfile (httpservletrequest request ، httpservletresponse) يلقي servleTexception ، ioException {// تحويل إلى multiparthttpletRequestRequestRequest ؛ (multiparthttpservletrequest) طلب ؛ // احصل على الملف في خريطة حاوية الخريطة <string ، multipartfile> fileMap = multipartrequest.getFileMap () ؛ // احصل على معلمة المسار التي تم تمريرها بواسطة Page FolderPath = request.getParameter ("المجلد") ؛ سلسلة الجذر = baseconfig.uploadpath ؛ String filePath = ROOTPATH + FOLDERPATH + "/" ؛ . العلم المنطقي = service.add (fileModel) ؛ if (flag) {string result = fileModel.getId ()+"؛ خريطة الخريطة = new hashmap <> () ؛ map.put ("id" ، fileModel.getId ()) ؛ // إرجاع ملف حفظ معرف //response.getWriter() .Rite(map) ؛ خريطة العودة } إرجاع فارغ ؛ }ملاحظة: يحصل هذا الرمز على جزء من معلومات الملف الذي تم تحميله ، مثل اسم الملف ، والمسار الذي تم تحميله ، وما إلى ذلك ، ويحفظ معلومات الملف في الجدول ، والكائن المقابل هو fileModel.
5. قم بتحديث المكون بعد اكتمال التحميل.
تأثير العرض النهائي:
ملاحظة: هنا نشير إلى حكم نوع ملف TXT. لبقية المستند و PPT ، هناك أيقونات العرض المقابلة. تحتاج فقط إلى إضافة النمط المقابل عند تحديد ما إذا كنت ستحكم.
المرفق: وفقًا للمسار الماضي/تنزيل رمز الملف:
/** * تنزيل الملف * * param savepath * حفظ الدليل * param اسم * الملف الأصلي * الاسم عند حفظه يحتوي على اللاحقة * request request * param respons * @reghn */public Static String Down (String SavePath ، اسم السلسلة ، اسم سلسلة السلسلة ، httpservletrequest request ، httpservledsponse) ملف الملف = ملف جديد (مسار) ؛ if (! file.exists ()) {// request.setattribute ("name" ، filename) ؛ إرجاع "download_error" ؛ // إرجاع ملف التنزيل غير موجود} response.setContentType ("Application/Octet-Stream") ؛ // قم بتعيين سلسلة رأس الاستجابة useragent = request.getheader ("مستخدم عامل"). TolowerCase () ؛ if (useragent.indexof ("msie")! = -1) {// ie browser // system.out.println ("IE Browser") ؛ Response.addHeader ("Disposition" ، "المرفق ؛ filename =" + urlencoder.encode (الاسم ، "UTF-8")) ؛ } آخر {desponse.addHeader ("disposition content" ، "filename =" + new string (name.getBytes ("UTF-8") ، "ISO8859-1")) ؛ } response.addheader ("طول المحتوى" ، " + file.length ()) ؛ // قم بتنزيل الملف في شكل دفق inputstream fis = جديد bufferedInputStream (جديد fileInputStream (path)) ؛ byte [] buffer = new byte [fis.availival ()] ؛ Fis.Read (Buffer) ؛ fis.close () ؛ //response.setContentType("image/* ") ؛ // تعيين نوع ملف الإرجاع outputStream TOCLIENT = RESEPTRIM.GetOutputStream () ؛ OutputStream BOS = جديد BufferedOutputStream (toClient) ؛ // BufferedWriter BW = جديد BufferedWriter (New OutputStreamWriter (BOS)) ؛ bos.write (المخزن المؤقت) ؛ //bw.close () ؛ bos.close () ؛ tooclient.close () ؛ العودة لاغية. } catch (استثناء e) {E.PrintStackTrace () ؛ //response.reset () ؛ إرجاع "استثناء" ؛ // العودة إلى صفحة الاستثناء} أخيرًا {/* if (toClient! = null) {try {toClient.Close () ؛ } catch (ioException e) {E.PrintStackTrace () ؛ }}*/}}مُرفَق:
تحميل جزء من الكود.
public static fileModel UploadFiles (String SavePath ، Map <String ، multipartfile> fileMap) {// قم بتحميل ملف // كائن مرفق fileModel fm = new fileModel () ؛ حاول {file file = ملف جديد (SavePath) ؛ // حدد ما إذا كان المجلد موجودًا ، وإذا لم يكن موجودًا ، قم بإنشاء المجلد makedir (ملف) ؛ if (fileMap! = null) {for (map.entry <string ، multipartfile> ectity: fileMap.EntrySet ()) {multipartfile f = entity.getValue () ؛ if (f! = null &&! f.isempty ()) {string uuid = eploadifyUtils.getUuid () ؛ // uuid هو اسم الملف عند حفظ سلسلة ext = uploadifyutils.getFileStext (f.getoriginalfilename ()) ؛ F.Transferto (NewFile) ؛ fm.setFilename (f.getoriginalfilename ()) ؛ fm.setName (uuid+"."+ext) ؛ fm.setFilePath (SavePath) ؛ // Save Path Fm.Setext (ext) ؛ fm.setsize (f.getSize ()) ؛ }} return fm ؛ } catch (استثناء e) {log.error (e) ؛ العودة لاغية. }}ما سبق هو تحميل وتحرير FileInput في Bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!