tp一步文件上传

发布时间：2023-09-06 01:25责任编辑：熊小新关键词：文件上传

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title></title>
???<JS href="__PUBLIC__/JS/jquery-1.11.3.js" />
???<JS href="__PUBLIC__/JS/jQuery-2.2.0.min.js" />
???<JS href="__PUBLIC__/JS/jquery.validate.js" />
???<JS href="__PUBLIC__/JS/ajaxfileupload.js" />
???<JS href="__PUBLIC__/JS/messages_zh.js" />
???<CSS href="__PUBLIC__/layui/css/layui.css" />
???<JS href="__PUBLIC__/layui/layui.js" />
</head>
<body>
<form action="">
<div class="left layui-upload">
???<div class="layui-upload-list" id="tupian">
???????<img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px;border-radius: 90px;">
???</div>
???<div>
???????

???????????
???????????????
???????????
???????????

???????<input type="file" onchange="preview(file)" id="test1" name="file" style="width: 60px;height: 30px;">
???</div>
</div>
<button id="xx5" ?style="margin-top: 50px;width: 50px;height:30px;background-color: #e2bebb;border: none;">1515</button>
<input type="text" name="name">

</form>

</body>
</html>
<script>
???//图片预览第一部分
???function preview(file){
???????var prevDiv = document.getElementById(‘_show‘);

???????if (file.files && file.files[0]){
???????????var reader = new FileReader();
???????????reader.onload = function(evt){
???????????????prevDiv.innerHTML = ‘<img src="‘ + evt.target.result + ‘" width="100px" height="100px" />‘;
???????????};
???????????reader.readAsDataURL(file.files[0]);
???????} else {
???????????prevDiv.innerHTML = ‘<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\‘‘ + file.value + ‘\‘"></div>‘;
???????}
???}
</script>
<script>

$(function(){
???//图片预览第二部分
// ???layui.use(‘upload‘, function() {
// ???????var upload = layui.upload;
// ???????var uploadInst = upload.render({
// ???????????elem: ‘#test1‘
// ???????????,auto:false
// ???????????, choose: function (obj) {
// ???????????????//预读本地文件示例，不支持ie8
// ???????????????obj.preview(function (index, file, result) {
// ???????????????????$(‘#demo1‘).attr(‘src‘, result); //图片链接（base64）
// ???????????????});
// ???????????}
// ???????});
// ???});
???????$("#xx5").on("click",function(){
???????????var fileObj = new FormData($("input[type=file]"));
???????????fileObj.append("file",$("input[type=file]")[0].files[0]);
???????????$.ajax({
???????????????url: ‘tupian‘ ,
???????????????type: ‘POST‘,
???????????????dataType:"json",
???????????????data: fileObj,
???????????????cache: false,
???????????????contentType: false,
???????????????processData: false,
???????????????success: function (msg) {
???????????????????alert(msg);
???????????????},
???????????????error: function (returndata) {
???????????????????alert(returndata);
???????????????}
???????????});

???????});

})
</script>

控制器部分:

public function tupian(){
        $imgDir = "Public/liaoping";
        if(! file_exists($imgDir)){
            mkdir($imgDir);
        }
        $fileName = uniqid().date("Ymd").$_FILES["file"]["name"];
        move_uploaded_file($_FILES["file"]["tmp_name"],$imgDir."/".$fileName);
        echo json_encode($fileName);
    }

tp一步文件上传

原文地址：http://www.cnblogs.com/ITGR/p/7840367.html

tp一步 文件上传

知识推荐

tp一步文件上传