> 백엔드 개발 > PHP 튜토리얼 > 有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。

有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。

WBOY
풀어 주다: 2016-06-06 20:47:06
원래의
1033명이 탐색했습니다.

<code><script src="dropzone.js"></script>     
    <form action="data.php" method="post">
    <div class="row-fluid">
        <div class="span4" style="text-align: center;">
            <div id="my-dropzone">
                <img  id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >
            </div>
            <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;">
                <img  src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳
            </a>
        </div>
    </div>
    <button type="submit">上交</button>
    </form>
<script>
    var myDropzone = new Dropzone("div#my-dropzone", { 
        url: "./data.php",
        enqueueForUpload: true,
        clickable: '#openDropZone',
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n    <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n    <img  data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n  \n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n  <div class=\"dz-error-message\"><span data-dz-errormessage>\n"
    });
    myDropzone.on("selectedfiles", function(files) {
        myDropzone.removeAllFiles();
    });

    myDropzone.on("addedfile", function(file) {
        $('#imgNoPhoto').hide(); // hide the default no-imge img
    });

    $('#btnRegister').click(function(){        
        $('#apply-form').submit();
        return false;
    });
</script>            
<script src="jquery.js"></script>
</code>
로그인 후 복사
로그인 후 복사

回复内容:

<code><script src="dropzone.js"></script>     
    <form action="data.php" method="post">
    <div class="row-fluid">
        <div class="span4" style="text-align: center;">
            <div id="my-dropzone">
                <img  id="imgNoPhoto" src="/img/no-photo.jpg" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >
            </div>
            <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;">
                <img  src="" class="icon-plus icon-white" alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >照片上傳
            </a>
        </div>
    </div>
    <button type="submit">上交</button>
    </form>
<script>
    var myDropzone = new Dropzone("div#my-dropzone", { 
        url: "./data.php",
        enqueueForUpload: true,
        clickable: '#openDropZone',
        thumbnailWidth: 200,
        thumbnailHeight: 200,
        previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\" style=\"display: none;\"><span data-dz-name>\n    <div class=\"dz-size\" style=\"display: none;\" data-dz-size>\n    <img  data-dz-thumbnail / alt="有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。" >\n  \n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress>\n  <div class=\"dz-error-message\"><span data-dz-errormessage>\n"
    });
    myDropzone.on("selectedfiles", function(files) {
        myDropzone.removeAllFiles();
    });

    myDropzone.on("addedfile", function(file) {
        $('#imgNoPhoto').hide(); // hide the default no-imge img
    });

    $('#btnRegister').click(function(){        
        $('#apply-form').submit();
        return false;
    });
</script>            
<script src="jquery.js"></script>
</code>
로그인 후 복사
로그인 후 복사

贴部分代码你看下,后台是nodejs,希望对你有帮助
view:

<code> <form id="fmUpload" method="post" enctype="multipart/form-data" class="dropzone"></form>
</code>
로그인 후 복사

api:

<code>exports.upload = function(req, res) {
    //express file info
    var resource = req.files.resource;
}
</code>
로그인 후 복사

js:

<code><br>   $("#fmUpload").dropzone({
            paramName: 'resource',(看此处)
            url: '/images/upload',
            dictDefaultMessage: '将文件拖拽至此区域进行上传(或点击此区域)',
            acceptedFiles: 'image/*',
            parallelUploads: 1,
            maxFilesize: 1,
            maxFiles: 1,
            init: function() {},
            success: function(file, data) {
                if (data.status === 1) {
                    $scope.uploadImage = data.message;
                    $scope.listUserImages();
                } else {
                    alertService.showAlert({
                        content: data.message,
                        type: 'warning'
                    });
                    $('.dz-error-mark').show();
                }

            }
        });

</code>
로그인 후 복사

想问下楼主,你的data.php,除了做文件的上传操作,其它的比如操作数据库的操作可以进行么?
我这里也在使用这个插件,但遇到个问题,当把选择的文件上传到指定的路径后,前台如何进行显示,想在进行文件上传操作后,进行数据库插入操作,但不能执行,不知楼主有没有遇到过这样的问题呢?

관련 라벨:
php
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿