二、bootsrap fileinput 文件上傳

時間 2019-11-12

標籤 bootsrap fileinput 文件上傳简体版

原文原文鏈接

一、html文檔javascript

<!DOCTYPE html>php

<html lang="en"> <head> <meta charset="UTF-8"/> <title>Krajee JQuery Plugins - © Kartik</title> <link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="js/jquery.min.js"></script> <script src="js/fileinput.js" type="text/javascript"></script> <script src="js/fileinput_locale_zh.js"></script> <script src="js/bootstrap.min.js" type="text/javascript"></script> </head> <body> <div class="row" style="height: 500px; width: 500px"> <form enctype="multipart/form-data"> <div class="form-group"> <input id="file-1" type="file" multiple class="file-loading" data-overwrite-initial="false" data-min-file-count="1" > </div>html

</form>
    </div>
</body>
<script>

$("#file-1").fileinput({
    uploadUrl: 'upload.php', // you must set a valid URL here else you will get an error
    allowedFileExtensions : ['jpg', 'png','gif'],
    overwriteInitial: false,
    maxFileSize: 1000,
    maxFilesNum: 10,
    uploadExtraData : {name : 'liguoxiang'},
    browseClass: "btn btn-primary", //按鈕樣式             
    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
    //allowedFileTypes: ['image', 'video', 'flash'],
    slugCallback: function(filename) {
        return filename.replace('(', '_').replace(']', '_');
    }
}) .on("fileuploaded", function (e, data) {
    var res = data.response;
    alert(res.path);
    if (res.state > 0) {
        alert('上傳成功');
        alert(res.path);
    }
    else {
        alert('上傳失敗')
    }
});
</script>

</html>java

二、服務器處理及返回數據jquery

<?php $res = move_uploaded_file($_FILES['file_data']['tmp_name'], 'D:\\lgx\\'.$_FILES['file_data']['name'] ); if ($res){ $result = array( 'state' => 1, 'name' => '這是傳遞的值', 'path' => '值' ); } else{ $result = array( 'error' => '上傳失敗' ); } echo json_encode($res); json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。