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

发布于 2022-08-28 11:10:05 字数 1891 浏览 35 评论 0

<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"/>
            </div>
            <a id="openDropZone" href="#" class="btn btn-inverse" style="margin-top: 10px;">
                <img src="" class="icon-plus icon-white">照片上傳
            </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></span></div>\n    <div class=\"dz-size\" style=\"display: none;\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"dz-progress\"><span class=\"dz-upload\" data-dz-uploadprogress></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>"
    });
    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>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

巷雨优美回忆 2022-09-04 11:10:05

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

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

api:

exports.upload = function(req, res) {
    //express file info
    var resource = req.files.resource;
}

js:


$("#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(); } } });
简单爱 2022-09-04 11:10:05

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文