奥门新浦京的网址:文件上传实例代码,基于AngularJS的拖拽文件上传的实例代码

趁着HTML5的遍布,今后大多数浏览器都帮助拖拽功效,今天大家要说的便是落实一套拖拽上传的职能(Angularjs+nodejs)。

JS多文件上传的实例代码,js文件上传实例

废话十分少说了,具体落实代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <script src="./jquery-1.9.1.min.js"></script>
</head>
<body>
<form id= "uploadForm" action= "" method= "post" enctype ="multipart/form-data">
 <h1 >多文件上传 </h1>
 <table>
  <tr>
   <td >上传文件: <input type ="file" name="file[]" id="file" multiple="multiple"/><a href="javascript:;" id="add">[+]</a></td>
  </tr>
  <tr>
   <td>
    <input type ="button" value="上传" id="but"/>
   </td>
  </tr>
 </table>
</form>
</body>
</html>
<script>
 //添加
 $(document).on("click","#add",function(){
  var str_tr = "<tr>"+$(this).parents("tr").html()+"</tr>";
  //js 替换字符串样式
  str_tr = str_tr.replace(/\+/,'-');
  var new_str_tr = str_tr.replace(/add/,'del');
  $(this).parents("tr").after(new_str_tr);
 })
 //删除
 $(document).on("click","#del",function(){
  $(this).parents("tr").remove();
 })
 //文件上传
 $("#but").click(function(){
  var formData = new FormData($( "#uploadForm" )[0]);
  $.ajax({
   url: 'http://localhost/demo/selfWork_MVC/easymvc/app/Views/Index/upload.php' ,
   type: 'POST',
   data: formData,
   async: false,
   cache: false,
   contentType: false,
   processData: false,
   success: function (returndata) {
    alert(returndata);
   },
   error: function (returndata) {
    alert(returndata);
   }
  });
 })
</script>

相关参照他事他说加以考察:

原生JavaScript完成异步多文件上传

js 达成 input type=”file” 文件上传示例代码

以上所述是小编给大家介绍的JS多文件上传的实例代码,希望对大家全部援救,假使我们有任何疑问请给自个儿留言,我会及时苏醒我们的。在此也特别多谢大家对帮客之家网址的扶助!

废话十分少说了,具体贯彻代码如下所示: !DOCTYPE htmlhtmlhead lang=”en”
meta charset=”UTF-8″ title/title scri…

 php实例多文件上传实例代码
  //a = $(‘<span class=”MultiFile-title”
title=”‘+MultiFile.STRING.selected.replace(‘$file’,
v)+'”>’+MultiFile.STRING.file.replace(‘$file’,
v.match(/[^/\]+$/gi)[0])+'</span>’),

 代码如下

奥门新浦京的网址:文件上传实例代码,基于AngularJS的拖拽文件上传的实例代码。一、首先前端那款插件是基于AngularJS的,下边我们来看首要代码。

                

<!doctype html public “-//w3c//dtd xhtml 1.0 transitional//en”
“;
<html xmlns=”;
<head>
<meta http-equiv=”content-type” content=”text/html; charset=gb2312″
/>
<title>无题目文书档案</title>
</head>

引入js:

                 //那是新的代码结构.

<body>
<form id=”form1″ name=”form1″ enctype=”multipart/form-data”
method=”post” action=””>
  <label for=”filefield”></label>
  <input type=”file” name=”filefield” id=”filefield” />
  <input type=”submit” name=”button” id=”button” value=”文件开端上传”
/>
</form>
</body>
</html>

<script src="js/angular.1.3.15.min.js"></script>
<script src="js/ng-file-upload-shim.min.js"></script>
<script src="js/ng-file-upload.min.js"></script>

                

<?
/*

html:

                //抽出图片格式.

|   @param: $dir      — 寄存目录,最终加”/” [字串]
|   @param: $file_var — 表单变量 [字串]
|   @param: $max_size — 设定最大上传值,以k为单位. [整数/浮点数]
|   @param: $type     — 限定后辍名(小写),三个用”/”隔绝,不限定则留空
[字串]
|   @param: $name     — 上传后命名,留空则为原名,true为系统随机定名
[布林值]
|   return: 上传后文件名
*/

<div class="block__list block__list_words" ng-controller="UploadController">
  <div ngf-drop ng-model="files" class="drop-box" ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true" ngf-accept="'.jpg,.png,.pdf,.html,.zip'">//上传文件的格式
    <div class="progressbar" ng-show="showProgress">
      <div ng-repeat="file in files" class="uploadInfo">
        <div class="fileName col-sm-5 col-xs-6">{{file.name}}</div>
        <div class="divProgressbar{{$index}} col-sm-5 col-xs-4"></div>
        <div class="col-sm-2 col-xs-2">
          <i class="fa fa-trash fontIcon" ng-click="delFile($index)"></i>
        </div>
      </div>
    </div>
    <div ng-hide="showProgress">
      <div class="import import1">You may also import your own translation</div>
      <div class="import import2">memories(TMX)</div>
      <div class="import import3">or</div>
    </div>

    <div class="btn addFiles" ngf-select ng-model="files">
      <i class="fa fa-plus-circle"></i>
      Add files...
    </div>
  </div>
  <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

  Image thumbnail:
  <div ng-sortable="{ group: 'foobar' }">//调整上传后图片顺序
    <img ng-repeat="file in files" ngf-src="file">
  </div>
</div>

                ext = String(v.match(/.w{1,4}$/gi));

function _asupfiles($dir, $file_var, $max_size=”, $type=”,
$name=false)
{
if (!file_exists($dir)) showmsg(“上传图片战败:上传目录 “.$dir.”
不设有!”,0);
if (!is_writable($dir))
{
showmsg(“上传图片战败:上传目录 “.$dir.” 不恐怕写入!”,0);
exit();
}
$upfile=& $_files[“$file_var”];
$upfilename =  $upfile[‘name’];
if (!($upfilename===”))
{
if (!is_uploaded_file($upfile[‘tmp_name’]))
{
showmsg(‘上传图片失利:你挑选的文件不能够上传’,0);
exit();
}
if ($max_size>0 && $upfile[‘size’]/1024>$max_size)
{
showmsg(“上传图片战败:文件大小不可能超过  “.$max_size.”kb”,0);
exit();
}
$ext_name = strtolower(str_replace(“.”, “”, strrchr($upfilename,
“.”)));
if (!($type===”) && strpos($type, $ext_name)===false)
{
showmsg(“上传图片退步:只同意上传 “.$type.” 的文件!”,0);
exit();
}
($name==true)?$uploadname=time().mt_rand(100,999).”.”.$ext_name :”;
($name==false)?$uploadname=$upfilename:”;
!is_bool($name)?($uploadname=$name.”.”.$ext_name):”;
//$uploadname = $name ? md5(uniqid(rand())).”.”.$ext_name :
$upfilename;
if (!move_uploaded_file($upfile[‘tmp_name’], $dir.$uploadname))
{
showmsg(‘上传图片退步:文件上流传错!’,0);
 exit();
}
return $uploadname;
}
else
{
return ”;
}
}
?>

js:

               

(function () {
  'use strict';
  angular.module('todoApp', ['ng-sortable','ngFileUpload'])
  .controller('UploadController', ['$scope','Upload', function ($scope,Upload) {
   $scope.showProgress = false;

   $scope.$watch('files', function () {
    $scope.upload($scope.files);
   });//监听files有改变就上传

   $scope.upload = function (files) {
    if (files && files.length) {
     for (var i = 0; i < files.length; i++) {
      var file = files[i];
      (function(i){
        return Upload.upload({
         url: '/upload',
        fields: {'username': $scope.username},
        file: file
       }).progress(function (evt) {
        $scope.showProgress = true;
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);//上传百分比
        console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
       }).success(function (data, status, headers, config) {
        $scope.showProgress = true;
        var url = data.url;
        $scope.files[i].url = url;
        console.log('file ' + config.file.name + 'uploaded. Response: ', data);
        console.log("size:" + (config.file.size/1000).toFixed(2));//一个文件上传成功
       });
      })(i)
     }
    }
   };
  }])
})();

                // v变量是路线地址, 所以能够平素用img来展示出来.

二、然后是大家的后台代码:

                var imgs = (ext==’.jpg’ || ext==’.gif’ ||
ext==’.png’)?'<img onmouseover=”alert(this.src)” width=”30″
src=”‘+v+'”/>’:”;       

1、app.js中设定上传文件缓存地址

               

var multiparty = require('connect-multiparty');
var config = require('./config').config;
app.use(multiparty({
  uploadDir: path.join(config.upload_dir)
}));

                // 从’+imgs+’开端,正是自身增添的.

2、上传代码:

                a = $(‘<span class=”MultiFile-title”
title=”‘+MultiFile.STRING.selected.replace(‘$file’,
v)+'”>’+MultiFile.STRING.file.replace(‘$file’,
v.match(/[^/\]+$/gi)[0])+'</span> ‘+imgs+’  <a
class=”a_b” href=”javascript:;”
title=”点击插入主题” rsok=”‘+slave_count+'”
onclick=”alert(‘+slave_count+’); return false”>点击插入</a>’),

相关文章