Home > Backend Development > PHP Tutorial > 有用过dropzonejs拖拽上传文件的吗?php如何拿到它的值。

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

WBOY
Release: 2016-06-06 20:47:06
Original
1033 people have browsed it

<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>
Copy after login
Copy after login

回复内容:

<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>
Copy after login
Copy after login

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

<code> <form id="fmUpload" method="post" enctype="multipart/form-data" class="dropzone"></form>
</code>
Copy after login

api:

<code>exports.upload = function(req, res) {
    //express file info
    var resource = req.files.resource;
}
</code>
Copy after login

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>
Copy after login

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

Related labels:
php
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template